@artsy/palette 43.2.0 → 43.3.1-canary.1463.32455.0

package/dist/elements/PhoneInput/PhoneInputList.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+/**
+ * The option structure for the list in the dropdown menu
+ *
+ * @interface Option
+ * @property {string} `text` is the content that will be displayed as selected option
+ * @property {string} `name` is the content that will be displayed in the dropdown list
+ * @property {string} `value` is the value that will be passed to onSelect
+ */
+export interface Option {
+    text: string;
+    name: string;
+    value: string;
+    countryCode?: string;
+    flag?: string;
+}
+export interface PhoneInputListProps {
+    options: Option[];
+    onSelect: (option: Option) => void;
+    onClose: () => void;
+}
+export declare const PhoneInputList: ({ options, onSelect, onClose, }: PhoneInputListProps) => React.JSX.Element;

package/dist/elements/PhoneInput/PhoneInputList.js

@@ -0,0 +1,143 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PhoneInputList = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Input = require("../Input");
+var _Clickable = require("../Clickable");
+var _Text = require("../Text");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _themeGet = require("@styled-system/theme-get");
+var _Box = require("../Box");
+var _useKeyboardListNavigation = require("use-keyboard-list-navigation");
+var _useMouseActivity2 = require("../../utils/useMouseActivity");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * The option structure for the list in the dropdown menu
+ *
+ * @interface Option
+ * @property {string} `text` is the content that will be displayed as selected option
+ * @property {string} `name` is the content that will be displayed in the dropdown list
+ * @property {string} `value` is the value that will be passed to onSelect
+ */
+
+var PhoneInputList = exports.PhoneInputList = function PhoneInputList(_ref) {
+  var options = _ref.options,
+    onSelect = _ref.onSelect,
+    onClose = _ref.onClose;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var optionsWithRefs = (0, _react.useMemo)(function () {
+    return options.map(function (option) {
+      return {
+        option: option,
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      };
+    });
+  }, [options]);
+  var filteredOptionsWithRefs = (0, _react.useMemo)(function () {
+    return optionsWithRefs.filter(function (option) {
+      return "".concat(option.option.name.toLowerCase(), " ").concat(option.option.countryCode).includes(query.toLowerCase());
+    });
+  }, [optionsWithRefs, query]);
+  var containerRef = (0, _react.useRef)(null);
+  var _useKeyboardListNavig = (0, _useKeyboardListNavigation.useKeyboardListNavigation)({
+      ref: containerRef,
+      list: filteredOptionsWithRefs,
+      waitForInteractive: true,
+      onEnter: function onEnter(_ref2) {
+        var element = _ref2.element,
+          event = _ref2.event;
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(element.option);
+        reset();
+      }
+    }),
+    reset = _useKeyboardListNavig.reset,
+    set = _useKeyboardListNavig.set,
+    index = _useKeyboardListNavig.index;
+  var _useMouseActivity = (0, _useMouseActivity2.useMouseActivity)(),
+    lastMouseMoveTimestamp = _useMouseActivity.lastMouseMoveTimestamp;
+  var handleMouseEnter = function handleMouseEnter(i) {
+    return function () {
+      var now = performance.now();
+
+      // 50ms mouse move window
+      if (now - lastMouseMoveTimestamp.current < 50) {
+        set({
+          cursor: i,
+          interactive: true
+        });
+      }
+    };
+  };
+
+  // Moves focus to different options when keyboard navigating using up/down
+  (0, _react.useEffect)(function () {
+    var _option$ref, _option$ref$current;
+    var option = filteredOptionsWithRefs[index];
+    option === null || option === void 0 ? void 0 : (_option$ref = option.ref) === null || _option$ref === void 0 ? void 0 : (_option$ref$current = _option$ref.current) === null || _option$ref$current === void 0 ? void 0 : _option$ref$current.focus();
+  }, [index, filteredOptionsWithRefs]);
+  var handleKeyDown = function handleKeyDown(e) {
+    switch (e.key) {
+      case "Escape":
+        reset();
+        onClose();
+        break;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    autoFocus: true,
+    placeholder: "Search",
+    value: query,
+    onChange: function onChange(e) {
+      setQuery(e.target.value);
+      reset();
+    },
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/_react.default.createElement(PhoneInputListOptions, null, filteredOptionsWithRefs.map(function (_ref3, i) {
+    var option = _ref3.option,
+      ref = _ref3.ref;
+    return /*#__PURE__*/_react.default.createElement(PhoneInputListOption, {
+      key: option.value,
+      ref: ref,
+      role: "option",
+      onMouseEnter: handleMouseEnter(i),
+      onClick: function onClick() {
+        onSelect(option);
+      },
+      tabIndex: -1
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm",
+      minWidth: "8ch"
+    }, option.text), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, option.name));
+  })));
+};
+PhoneInputList.displayName = "PhoneInputList";
+var PhoneInputListOption = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
+  displayName: "PhoneInputList__PhoneInputListOption",
+  componentId: "sc-1jeqwj2-0"
+})(["display:flex;width:100%;flex-direction:row;gap:", ";padding:", " 0;color:", ";&:focus{color:", ";text-decoration:underline;outline:none;}"], (0, _themeGet.themeGet)("space.0.5"), (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"));
+var PhoneInputListOptions = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "PhoneInputList__PhoneInputListOptions",
+  componentId: "sc-1jeqwj2-1"
+})(["max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch;"]);
+//# sourceMappingURL=PhoneInputList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInputList.js","names":["_react","_interopRequireWildcard","require","_Input","_Clickable","_Text","_styledComponents","_interopRequireDefault","_themeGet","_Box","_useKeyboardListNavigation","_useMouseActivity2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","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","PhoneInputList","exports","_ref","options","onSelect","onClose","_useState","useState","_useState2","query","setQuery","optionsWithRefs","useMemo","map","option","ref","createRef","filteredOptionsWithRefs","filter","concat","toLowerCase","countryCode","includes","containerRef","useRef","_useKeyboardListNavig","useKeyboardListNavigation","list","waitForInteractive","onEnter","_ref2","element","event","preventDefault","stopPropagation","reset","index","_useMouseActivity","useMouseActivity","lastMouseMoveTimestamp","handleMouseEnter","now","performance","current","cursor","interactive","useEffect","_option$ref","_option$ref$current","focus","handleKeyDown","e","createElement","Box","Input","autoFocus","placeholder","onChange","target","onKeyDown","PhoneInputListOptions","_ref3","PhoneInputListOption","role","onMouseEnter","onClick","tabIndex","Text","variant","minWidth","text","displayName","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/PhoneInput/PhoneInputList.tsx"],"sourcesContent":["import React, { createRef, useEffect, useMemo, useRef, useState } from \"react\"\nimport { Input } from \"../Input\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { Box } from \"../Box\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { useMouseActivity } from \"../../utils/useMouseActivity\"\n\n/**\n * The option structure for the list in the dropdown menu\n *\n * @interface Option\n * @property {string} `text` is the content that will be displayed as selected option\n * @property {string} `name` is the content that will be displayed in the dropdown list\n * @property {string} `value` is the value that will be passed to onSelect\n */\nexport interface Option {\n  text: string\n  name: string\n  value: string\n  countryCode?: string\n  flag?: string\n}\n\nexport interface PhoneInputListProps {\n  options: Option[]\n  onSelect: (option: Option) => void\n  onClose: () => void\n}\n\nexport const PhoneInputList = ({\n  options,\n  onSelect,\n  onClose,\n}: PhoneInputListProps) => {\n  const [query, setQuery] = useState(\"\")\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const filteredOptionsWithRefs = useMemo(() => {\n    return optionsWithRefs.filter((option) =>\n      `${option.option.name.toLowerCase()} ${\n        option.option.countryCode\n      }`.includes(query.toLowerCase())\n    )\n  }, [optionsWithRefs, query])\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { reset, set, index } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: filteredOptionsWithRefs,\n    waitForInteractive: true,\n    onEnter: ({ element, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelect(element.option)\n      reset()\n    },\n  })\n\n  const { lastMouseMoveTimestamp } = useMouseActivity()\n\n  const handleMouseEnter = (i: number) => () => {\n    const now = performance.now()\n\n    // 50ms mouse move window\n    if (now - lastMouseMoveTimestamp.current < 50) {\n      set({ cursor: i, interactive: true })\n    }\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = filteredOptionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, filteredOptionsWithRefs])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        reset()\n        onClose()\n        break\n    }\n  }\n\n  return (\n    <Box ref={containerRef}>\n      <Input\n        autoFocus\n        placeholder=\"Search\"\n        value={query}\n        onChange={(e) => {\n          setQuery(e.target.value)\n          reset()\n        }}\n        onKeyDown={handleKeyDown}\n      />\n\n      <PhoneInputListOptions>\n        {filteredOptionsWithRefs.map(({ option, ref }, i) => (\n          <PhoneInputListOption\n            key={option.value}\n            ref={ref}\n            role=\"option\"\n            onMouseEnter={handleMouseEnter(i)}\n            onClick={() => {\n              onSelect(option)\n            }}\n            tabIndex={-1}\n          >\n            <Text variant=\"sm\" minWidth=\"8ch\">\n              {option.text}\n            </Text>\n\n            <Text variant=\"sm\">{option.name}</Text>\n          </PhoneInputListOption>\n        ))}\n      </PhoneInputListOptions>\n    </Box>\n  )\n}\n\nconst PhoneInputListOption = styled(Clickable)`\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  gap: ${themeGet(\"space.0.5\")};\n  padding: ${themeGet(\"space.1\")} 0;\n  color: ${themeGet(\"colors.mono60\")};\n  &:focus {\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n    outline: none;\n  }\n`\n\nconst PhoneInputListOptions = styled(Box)`\n  max-height: 250px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"mappings":"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"}

package/dist/elements/PhoneInput/PhoneInputList.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

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.2.0",
+  "version": "43.3.1-canary.1463.32455.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -190,5 +190,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "5969c54d587e2f8966b28a7dc1095513f2887521"
+  "gitHead": "7f8fd0f64105ecad4716ce1d2b722d51d8230b25"
 }