@artsy/palette 22.0.1 → 22.1.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# v22.1.0 (Thu Jul 14 2022)
+
+#### 🚀  Enhancement
+
+- feat(banner): exports variants; ensures text stays centered when dismissible [#1193](https://github.com/artsy/palette/pull/1193) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- feat(banner): exports variants; ensures text stays centered when dismissable ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v22.0.3 (Fri Jul 08 2022)
+
+#### 🐛  Bug Fix
+
+- chore: sync local state with `value` prop for `Range` component [#1192](https://github.com/artsy/palette/pull/1192) ([@dimatretyak](https://github.com/dimatretyak))
+- chore: sync local state with value prop ([@dimatretyak](https://github.com/dimatretyak))
+
+#### Authors: 1
+
+- Dima Tretyak (Dzmitry Tratsiak) ([@dimatretyak](https://github.com/dimatretyak))
+
+---
+
+# v22.0.2 (Thu Jun 30 2022)
+
+#### 🐛  Bug Fix
+
+- fix(toggle): deprecates toggle [#1189](https://github.com/artsy/palette/pull/1189) ([@dzucconi](https://github.com/dzucconi))
+- fix(toggle): deprecates toggle ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v22.0.1 (Thu Jun 30 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Banner/Banner.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { FlexProps } from "../Flex";
+export declare type BannerVariant = keyof typeof BANNER_VARIANTS;
 export interface BannerProps extends FlexProps {
-    variant?: keyof typeof VARIANTS;
+    variant?: BannerVariant;
     dismissable?: boolean;
 }
 /** A banner */
 export declare const Banner: React.FC<BannerProps>;
-declare const VARIANTS: {
+export declare const BANNER_VARIANTS: {
     defaultLight: {
         backgroundColor: string;
         color: string;
@@ -28,4 +29,3 @@ declare const VARIANTS: {
         color: string;
     };
 };
-export {};

package/dist/elements/Banner/Banner.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Banner = void 0;
+exports.Banner = exports.BANNER_VARIANTS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,8 +15,6 @@ var _styledSystem = require("styled-system");
 
 var _CloseIcon = require("../../svgs/CloseIcon");
 
-var _Theme = require("../../Theme");
-
 var _Clickable = require("../Clickable");
 
 var _Flex = require("../Flex");
@@ -56,11 +54,6 @@ var Banner = function Banner(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var size = (0, _Theme.useThemeConfig)({
-    v2: "small",
-    v3: "xs"
-  });
-
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       dismissed = _useState2[0],
@@ -72,16 +65,22 @@ var Banner = function Banner(_ref) {
 
   if (dismissed) return null;
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
-    p: 1
+    position: "relative",
+    py: 1,
+    px: 4
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: size,
+    variant: "xs",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     textAlign: "center",
     flex: 1
   }, children), dismissable && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    pl: 1,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    p: 1,
     display: "flex",
     alignItems: "center",
     color: "currentColor",
@@ -98,7 +97,7 @@ Banner.displayName = "Banner";
 Banner.defaultProps = {
   variant: "defaultLight"
 };
-var VARIANTS = {
+var BANNER_VARIANTS = {
   defaultLight: {
     backgroundColor: "black10",
     color: "black100"
@@ -120,10 +119,11 @@ var VARIANTS = {
     color: "white100"
   }
 };
+exports.BANNER_VARIANTS = BANNER_VARIANTS;
 var Container = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Banner__Container",
   componentId: "sc-1bfmimv-0"
 })(["", ""], (0, _styledSystem.variant)({
-  variants: VARIANTS
+  variants: BANNER_VARIANTS
 }));
 //# sourceMappingURL=Banner.js.map

package/dist/elements/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","size","v2","v3","dismissed","setDismissed","handleClick","fill","defaultProps","variant","VARIANTS","defaultLight","backgroundColor","color","defaultDark","success","error","brand","Container","Flex","variants"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIvC;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,IAAiB,GAAG,2BAAe;AAAEC,IAAAA,EAAE,EAAE,OAAN;AAAeC,IAAAA,EAAE,EAAE;AAAnB,GAAf,CAA1B;;AAEA,kBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFD;;AAIA,MAAID,SAAJ,EAAe,OAAO,IAAP;AAEf,sBACE,6BAAC,SAAD;AAAW,IAAA,CAAC,EAAE;AAAd,KAAqBJ,IAArB,gBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEC,IADX;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,SAAS,EAAC,QALZ;AAME,IAAA,IAAI,EAAE;AANR,KAQGF,QARH,CADF,EAYGD,WAAW,iBACV,6BAAC,oBAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,KAAK,EAAC,cAJR;AAKE,IAAA,OAAO,EAAEQ;AALX,kBAOE,6BAAC,oBAAD;AAAW,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAlB,IAPF,CAbJ,CADF;AA0BD,CAzCM;;;AAAMV,M;AA2CbA,MAAM,CAACW,YAAP,GAAsB;AACpBC,EAAAA,OAAO,EAAE;AADW,CAAtB;AAIA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALE;AASfE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GATM;AAafG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbQ;AAiBfI,EAAAA,KAAK,EAAE;AACLL,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAjBQ,CAAjB;AAuBA,IAAMK,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEV;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface BannerProps extends FlexProps {\n  variant?: keyof typeof VARIANTS\n  dismissable?: boolean\n}\n\n/** A banner */\nexport const Banner: React.FC<BannerProps> = ({\n  dismissable = false,\n  children,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n\n  const [dismissed, setDismissed] = useState(false)\n\n  const handleClick = () => {\n    setDismissed(true)\n  }\n\n  if (dismissed) return null\n\n  return (\n    <Container p={1} {...rest}>\n      <Text\n        variant={size}\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        flex={1}\n      >\n        {children}\n      </Text>\n\n      {dismissable && (\n        <Clickable\n          pl={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          color=\"currentColor\"\n          onClick={handleClick}\n        >\n          <CloseIcon style={{ fill: \"currentcolor\" }} />\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nBanner.defaultProps = {\n  variant: \"defaultLight\",\n}\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Flex)`\n  ${variant({ variants: VARIANTS })}\n`\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","dismissed","setDismissed","handleClick","fill","defaultProps","variant","BANNER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","success","error","brand","Container","Flex","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIvC;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,kBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFD;;AAIA,MAAID,SAAJ,EAAe,OAAO,IAAP;AAEf,sBACE,6BAAC,SAAD;AAAW,IAAA,QAAQ,EAAC,UAApB;AAA+B,IAAA,EAAE,EAAE,CAAnC;AAAsC,IAAA,EAAE,EAAE;AAA1C,KAAiDD,IAAjD,gBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,SAAS,EAAC,QALZ;AAME,IAAA,IAAI,EAAE;AANR,KAQGD,QARH,CADF,EAYGD,WAAW,iBACV,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,KAAK,EAAE,CAHT;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,CAAC,EAAE,CALL;AAME,IAAA,OAAO,EAAC,MANV;AAOE,IAAA,UAAU,EAAC,QAPb;AAQE,IAAA,KAAK,EAAC,cARR;AASE,IAAA,OAAO,EAAEK;AATX,kBAWE,6BAAC,oBAAD;AAAW,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAlB,IAXF,CAbJ,CADF;AA8BD,CA3CM;;;AAAMP,M;AA6CbA,MAAM,CAACQ,YAAP,GAAsB;AACpBC,EAAAA,OAAO,EAAE;AADW,CAAtB;AAIO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADe;AAK7BC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALgB;AAS7BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAToB;AAa7BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbsB;AAiB7BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAjBsB,CAAxB;;AAuBP,IAAMK,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEV;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport type BannerVariant = keyof typeof BANNER_VARIANTS\n\nexport interface BannerProps extends FlexProps {\n  variant?: BannerVariant\n  dismissable?: boolean\n}\n\n/** A banner */\nexport const Banner: React.FC<BannerProps> = ({\n  dismissable = false,\n  children,\n  ...rest\n}) => {\n  const [dismissed, setDismissed] = useState(false)\n\n  const handleClick = () => {\n    setDismissed(true)\n  }\n\n  if (dismissed) return null\n\n  return (\n    <Container position=\"relative\" py={1} px={4} {...rest}>\n      <Text\n        variant=\"xs\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        flex={1}\n      >\n        {children}\n      </Text>\n\n      {dismissable && (\n        <Clickable\n          position=\"absolute\"\n          top={0}\n          right={0}\n          bottom={0}\n          p={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          color=\"currentColor\"\n          onClick={handleClick}\n        >\n          <CloseIcon style={{ fill: \"currentcolor\" }} />\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nBanner.defaultProps = {\n  variant: \"defaultLight\",\n}\n\nexport const BANNER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Flex)`\n  ${variant({ variants: BANNER_VARIANTS })}\n`\n"],"file":"Banner.js"}

package/dist/elements/Range/Range.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _helpers = require("../../helpers");
 
+var _utils = require("../../utils");
+
 var _remapValue = require("../../utils/remapValue");
 
 var _Box = require("../Box");
@@ -27,6 +29,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -99,7 +109,11 @@ var Range = function Range(_ref) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, []); // Sync local state with value prop
+
+  (0, _utils.useUpdateEffect)(function () {
+    setValues(value);
+  }, _toConsumableArray(value));
   var selectionRectangle = "rect(0, ".concat((0, _remapValue.remapValue)(values[1], {
     min: min,
     max: max

package/dist/elements/Range/Range.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","ariaLabels","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [min: number, max: number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1]) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0]) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    if (!maxRef.current) return\n    setMaxWidth(maxRef.current.offsetWidth)\n  }, [])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n\n      {/* Max slider is clipped so position a shadow independent of it */}\n      <Shadow\n        left={remapValue(\n          values[1],\n          { min, max },\n          { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n        )}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Shadow = styled(Box)`\n  position: absolute;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  top: 50%;\n  margin-top: -${RANGE_HANDLE_SIZE / 2}px;\n  background-color: transparent;\n  pointer-events: none;\n  border-radius: 50%;\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n\n  &:first-of-type {\n    &::-webkit-slider-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"file":"Range.js"}
+{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","ariaLabels","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,iBAAiB,GAAG,EAA1B;;;AAWA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,OAQrC;AAAA,MAPJC,UAOI,QAPJA,UAOI;AAAA,MANJC,GAMI,QANJA,GAMI;AAAA,MALJC,GAKI,QALJA,GAKI;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,CAAC,CAAD,EAAIF,GAAJ,CAGJ;AAAA,MAFJG,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,kBAAgC,IAAhC,CAAf;AACA,MAAMC,MAAM,GAAG,kBAAgC,IAAhC,CAAf;;AAEA,kBAA4B,oBAASJ,KAAT,CAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf;;AAEA,mBAAgC,oBAAS,CAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,QAEmB;AAAA,QADhBT,KACgB,SADzCU,MACyC,CAD/BC,aAC+B;AACzC,QAAIX,KAAK,GAAGK,MAAM,CAAC,CAAD,CAAlB,EAAuB;AACvBC,IAAAA,SAAS,CAAC,CAACN,KAAD,EAAQK,MAAM,CAAC,CAAD,CAAd,CAAD,CAAT;AACAJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG,CAACD,KAAD,EAAQK,MAAM,CAAC,CAAD,CAAd,CAAH,CAAR;AACD,GAND;;AAQA,MAAMO,eAAe,GAAG,SAAlBA,eAAkB,QAEmB;AAAA,QADhBZ,KACgB,SADzCU,MACyC,CAD/BC,aAC+B;AACzC,QAAIX,KAAK,GAAGK,MAAM,CAAC,CAAD,CAAlB,EAAuB;AACvBC,IAAAA,SAAS,CAAC,CAACD,MAAM,CAAC,CAAD,CAAP,EAAYL,KAAZ,CAAD,CAAT;AACAC,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG,CAACI,MAAM,CAAC,CAAD,CAAP,EAAYL,KAAZ,CAAH,CAAR;AACD,GAND;;AAQA,uBAAU,YAAM;AACd,QAAI,CAACI,MAAM,CAACS,OAAZ,EAAqB;AACrBL,IAAAA,WAAW,CAACJ,MAAM,CAACS,OAAP,CAAeC,WAAhB,CAAX;AACD,GAHD,EAGG,EAHH;AAKA,uBAAU,YAAM;AACd,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAI,CAACX,MAAM,CAACS,OAAZ,EAAqB;AACrBL,MAAAA,WAAW,CAACJ,MAAM,CAACS,OAAP,CAAeC,WAAhB,CAAX;AACD,KAHD;;AAKAE,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,YAAlC,EAAgD;AAAEG,MAAAA,OAAO,EAAE;AAAX,KAAhD;AAEA,WAAO,YAAM;AACXF,MAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCJ,YAArC;AACD,KAFD;AAGD,GAXD,EAWG,EAXH,EA7BI,CA0CH;;AACA,8BAAgB,YAAM;AACrBT,IAAAA,SAAS,CAACN,KAAD,CAAT;AACD,GAFA,qBAEMA,KAFN;AAID,MAAMoB,kBAAkB,qBAAc,4BACpCf,MAAM,CAAC,CAAD,CAD8B,EAEpC;AAAER,IAAAA,GAAG,EAAHA,GAAF;AAAOC,IAAAA,GAAG,EAAHA;AAAP,GAFoC,EAGpC;AAAED,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,GAAG,EAAES,QAAQ,GAAGb;AAA1B,GAHoC,CAAd,sBAIX,4BACXW,MAAM,CAAC,CAAD,CADK,EAEX;AAAER,IAAAA,GAAG,EAAHA,GAAF;AAAOC,IAAAA,GAAG,EAAHA;AAAP,GAFW,EAGX;AAAED,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,GAAG,EAAES,QAAQ,GAAGb;AAA1B,GAHW,CAJW,QAAxB;AAUA,MAAM2B,YAAY,qBAAcd,QAAd,iBAA6Bb,iBAA7B,iBAAqD,4BACrEW,MAAM,CAAC,CAAD,CAD+D,EAErE;AAAER,IAAAA,GAAG,EAAHA,GAAF;AAAOC,IAAAA,GAAG,EAAHA;AAAP,GAFqE,EAGrE;AAAED,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,GAAG,EAAES,QAAQ,GAAGb;AAA1B,GAHqE,CAArD,QAAlB;AAMA,sBACE,oBAAC,KAAD,EAAWQ,IAAX,eACE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAE;AAAEoB,MAAAA,IAAI,EAAEF;AAAR;AAAlB,IADF,eAGE,oBAAC,MAAD;AACE,IAAA,GAAG,EAAEjB,MADP;AAEE,IAAA,GAAG,EAAEN,GAFP;AAGE,IAAA,GAAG,EAAEC,GAHP;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,OAAO,EAAEU,eALX;AAME,IAAA,KAAK,EAAEJ,MAAM,CAAC,CAAD,CANf;AAOE,kBAAYT,UAAZ,aAAYA,UAAZ,uBAAYA,UAAU,CAAG,CAAH;AAPxB,IAHF,eAaE,oBAAC,MAAD;AACE,IAAA,GAAG,EAAEQ,MADP;AAEE,IAAA,GAAG,EAAEP,GAFP;AAGE,IAAA,GAAG,EAAEC,GAHP;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,OAAO,EAAEa,eALX;AAME,IAAA,KAAK,EAAEP,MAAM,CAAC,CAAD,CANf;AAOE,IAAA,KAAK,EAAE;AAAEiB,MAAAA,IAAI,EAAED;AAAR,KAPT;AAQE,kBAAYzB,UAAZ,aAAYA,UAAZ,uBAAYA,UAAU,CAAG,CAAH;AARxB,IAbF,eAyBE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAE,4BACJS,MAAM,CAAC,CAAD,CADF,EAEJ;AAAER,MAAAA,GAAG,EAAHA,GAAF;AAAOC,MAAAA,GAAG,EAAHA;AAAP,KAFI,EAGJ;AAAED,MAAAA,GAAG,EAAE,CAAP;AAAUC,MAAAA,GAAG,EAAES,QAAQ,GAAGb;AAA1B,KAHI;AADR,IAzBF,CADF;AAmCD,CA1GM;;;AAAMC,K;AA4Gb,IAAM4B,KAAK,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,2LAGC9B,iBAHD,EAca,wBAAS,gBAAT,CAdb,CAAX;AAkBA,IAAM+B,MAAM,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,oKAEDhC,iBAFC,EAGAA,iBAHA,EAKKA,iBAAiB,GAAG,CALzB,EASIiC,oBATJ,CAAZ;AAYA,IAAMC,SAAS,GAAG,+BAAOF,QAAP,CAAH;AAAA;AAAA;AAAA,mGAOO,wBAAS,cAAT,CAPP,CAAf;AAUA,IAAMG,UAAU,OAAGC,qBAAH,iCAEJpC,iBAFI,CAAhB;AAKA,IAAMqC,YAAY,OAAGD,qBAAH,8HAGPpC,iBAHO,EAINA,iBAJM,EAKI,wBAAS,iBAAT,CALJ,EAOI,wBAAS,gBAAT,CAPJ,CAAlB;;AAUA,IAAMsC,MAAM,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qeAWNL,UAXM,EAeNA,UAfM,EAoBNE,YApBM,EAwBNA,YAxBM,EA8Bc,wBAAS,eAAT,CA9Bd,EAmCc,wBAAS,eAAT,CAnCd,EAyCQJ,oBAzCR,EA6CQA,oBA7CR,CAAZ;;AAkDAK,MAAM,CAACG,YAAP,GAAsB;AACpBC,EAAAA,IAAI,EAAE;AADc,CAAtB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [min: number, max: number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1]) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0]) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    if (!maxRef.current) return\n    setMaxWidth(maxRef.current.offsetWidth)\n  }, [])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n   // Sync local state with value prop\n   useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n\n      {/* Max slider is clipped so position a shadow independent of it */}\n      <Shadow\n        left={remapValue(\n          values[1],\n          { min, max },\n          { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n        )}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Shadow = styled(Box)`\n  position: absolute;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  top: 50%;\n  margin-top: -${RANGE_HANDLE_SIZE / 2}px;\n  background-color: transparent;\n  pointer-events: none;\n  border-radius: 50%;\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n\n  &:first-of-type {\n    &::-webkit-slider-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"file":"Range.js"}

package/dist/elements/Toggle/Toggle.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import { SansSize } from "../../Theme";
 import { FlexProps } from "../Flex";
+/**
+ * @deprecated Use `Expandable` instead.
+ */
 export interface ToggleProps extends FlexProps {
     chevronSize?: number;
     disabled?: boolean;

package/dist/elements/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toggle/Toggle.tsx"],"names":["Toggle","label","textSize","chevronSize","defaultExpanded","expanded","disabled","children","renderSecondaryAction","onClick","rest","setExpanded","toggleExpand","prevExpanded","e","undefined","visibility","Header","Clickable","props","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACA;AACA;AACA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAUvC;AAAA,MATJC,KASI,QATJA,KASI;AAAA,2BARJC,QAQI;AAAA,MARJA,QAQI,8BARO,GAQP;AAAA,8BAPJC,WAOI;AAAA,MAPJA,WAOI,iCAPU,EAOV;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,QAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,QAAI,CAACN,QAAL,EAAe;AACbK,MAAAA,WAAW,CAAC,UAACE,YAAD;AAAA,eAAkB,CAACA,YAAnB;AAAA,OAAD,CAAX;AACD;AACF,GAJD;;AAMA,sBACE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,aAAa,EAAC,QAAjC;AAA0C,IAAA,EAAE,EAAE;AAA9C,KAAqDH,IAArD,gBACE,6BAAC,MAAD;AACE,IAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdF,MAAAA,YAAY;AACZ,QAAEH,QAAO,KAAKM,SAAd,KAA4BN,QAAO,CAACK,CAAD,CAAnC;AACD,KAJH;AAKE,IAAA,QAAQ,EAAER,QALZ;AAME,IAAA,SAAS,EAAC,WANZ;AAOE,IAAA,WAAW,EAAC,SAPd;AAQE,IAAA,EAAE,EAAE,CARN;AASE,qBAAeD;AATjB,kBAWE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,eAArB;AAAqC,IAAA,UAAU,EAAC;AAAhD,KACG,OAAOJ,KAAP,KAAiB,QAAjB,gBACC,6BAAC,gBAAD;AACE,IAAA,IAAI,EAAEC,QADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,KAAK,EAAC,UAHR;AAIE,IAAA,EAAE,EAAE;AAJN,KAMGD,KANH,CADD,GAUCA,KAXJ,eAcE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,OAArB;AAA6B,IAAA,UAAU,EAAC;AAAxC,KACGO,qBAAqB,IACpBA,qBAAqB,CAAC;AAAEF,IAAAA,QAAQ,EAARA,QAAF;AAAYD,IAAAA,QAAQ,EAARA,QAAZ;AAAsBH,IAAAA,QAAQ,EAARA;AAAtB,GAAD,CAFzB,eAIE,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE;AAAEc,MAAAA,UAAU,EAAEV,QAAQ,GAAG,QAAH,GAAc;AAApC,KADT;AAEE,IAAA,SAAS,EAAED,QAAQ,GAAG,IAAH,GAAU,MAF/B;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,MAAM,EAAEA,WAJV;AAKE,IAAA,EAAE,EAAE,CALN;AAME,mBAAY;AANd,IAJF,CAdF,CAXF,CADF,EA0CGE,QAAQ,IAAIE,QAAZ,iBACC,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,UAAU,EAAC;AAAxC,KACGA,QADH,CA3CJ,CADF;AAkDD,CArEM;;;AAAMP,M;AAuEb,IAAMiB,MAAM,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8CACQ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACb,QAAN,GAAiB,MAAjB,GAA0B,MAAtC;AAAA,CADR,CAAZ;AAKAW,MAAM,CAACG,WAAP,GAAqB,QAArB","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { SansSize } from \"../../Theme\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Sans } from \"../Typography\"\n\nexport interface ToggleProps extends FlexProps {\n  chevronSize?: number\n  disabled?: boolean\n  expanded?: boolean\n  label?: string | JSX.Element\n  textSize?: SansSize\n  /**\n   * Adds the ability to render a set of components by the chevron for\n   * secondary actions such as clearing filters\n   */\n  renderSecondaryAction?: (\n    toggleProps: Pick<ToggleProps, \"disabled\" | \"expanded\" | \"textSize\">\n  ) => JSX.Element\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\nexport interface ToggleState {\n  disabled: boolean\n  expanded: boolean\n}\n\n/**\n * A toggle component used to show / hide / expand content\n * @deprecated Use `Expandable`\n */\nexport const Toggle: React.FC<ToggleProps> = ({\n  label,\n  textSize = \"2\",\n  chevronSize = 12,\n  expanded: defaultExpanded,\n  disabled,\n  children,\n  renderSecondaryAction,\n  onClick,\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const toggleExpand = () => {\n    if (!disabled) {\n      setExpanded((prevExpanded) => !prevExpanded)\n    }\n  }\n\n  return (\n    <Flex width=\"100%\" flexDirection=\"column\" pb={2} {...rest}>\n      <Header\n        onClick={(e) => {\n          toggleExpand()\n          !(onClick === undefined) && onClick(e)\n        }}\n        disabled={disabled}\n        borderTop=\"1px solid\"\n        borderColor=\"black10\"\n        pt={2}\n        aria-expanded={expanded}\n      >\n        <Flex justifyContent=\"space-between\" alignItems=\"center\">\n          {typeof label === \"string\" ? (\n            <Sans\n              size={textSize as SansSize}\n              weight=\"medium\"\n              color=\"black100\"\n              my={0.5}\n            >\n              {label}\n            </Sans>\n          ) : (\n            label\n          )}\n\n          <Flex justifyContent=\"right\" alignItems=\"center\">\n            {renderSecondaryAction &&\n              renderSecondaryAction({ disabled, expanded, textSize })}\n\n            <ChevronIcon\n              style={{ visibility: disabled ? \"hidden\" : \"visible\" }}\n              direction={expanded ? \"up\" : \"down\"}\n              width={chevronSize}\n              height={chevronSize}\n              ml={1}\n              aria-hidden=\"true\"\n            />\n          </Flex>\n        </Flex>\n      </Header>\n\n      {expanded && children && (\n        <Flex flexDirection=\"column\" alignItems=\"left\">\n          {children}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nconst Header = styled(Clickable)`\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n  user-select: none;\n`\n\nHeader.displayName = \"Header\"\n"],"file":"Toggle.js"}
+{"version":3,"sources":["../../../src/elements/Toggle/Toggle.tsx"],"names":["Toggle","label","textSize","chevronSize","defaultExpanded","expanded","disabled","children","renderSecondaryAction","onClick","rest","setExpanded","toggleExpand","prevExpanded","e","undefined","visibility","Header","Clickable","props","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AACA;AACA;AACA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAUvC;AAAA,MATJC,KASI,QATJA,KASI;AAAA,2BARJC,QAQI;AAAA,MARJA,QAQI,8BARO,GAQP;AAAA,8BAPJC,WAOI;AAAA,MAPJA,WAOI,iCAPU,EAOV;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,QAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,QAAI,CAACN,QAAL,EAAe;AACbK,MAAAA,WAAW,CAAC,UAACE,YAAD;AAAA,eAAkB,CAACA,YAAnB;AAAA,OAAD,CAAX;AACD;AACF,GAJD;;AAMA,sBACE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,aAAa,EAAC,QAAjC;AAA0C,IAAA,EAAE,EAAE;AAA9C,KAAqDH,IAArD,gBACE,6BAAC,MAAD;AACE,IAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdF,MAAAA,YAAY;AACZ,QAAEH,QAAO,KAAKM,SAAd,KAA4BN,QAAO,CAACK,CAAD,CAAnC;AACD,KAJH;AAKE,IAAA,QAAQ,EAAER,QALZ;AAME,IAAA,SAAS,EAAC,WANZ;AAOE,IAAA,WAAW,EAAC,SAPd;AAQE,IAAA,EAAE,EAAE,CARN;AASE,qBAAeD;AATjB,kBAWE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,eAArB;AAAqC,IAAA,UAAU,EAAC;AAAhD,KACG,OAAOJ,KAAP,KAAiB,QAAjB,gBACC,6BAAC,gBAAD;AACE,IAAA,IAAI,EAAEC,QADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,KAAK,EAAC,UAHR;AAIE,IAAA,EAAE,EAAE;AAJN,KAMGD,KANH,CADD,GAUCA,KAXJ,eAcE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,OAArB;AAA6B,IAAA,UAAU,EAAC;AAAxC,KACGO,qBAAqB,IACpBA,qBAAqB,CAAC;AAAEF,IAAAA,QAAQ,EAARA,QAAF;AAAYD,IAAAA,QAAQ,EAARA,QAAZ;AAAsBH,IAAAA,QAAQ,EAARA;AAAtB,GAAD,CAFzB,eAIE,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE;AAAEc,MAAAA,UAAU,EAAEV,QAAQ,GAAG,QAAH,GAAc;AAApC,KADT;AAEE,IAAA,SAAS,EAAED,QAAQ,GAAG,IAAH,GAAU,MAF/B;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,MAAM,EAAEA,WAJV;AAKE,IAAA,EAAE,EAAE,CALN;AAME,mBAAY;AANd,IAJF,CAdF,CAXF,CADF,EA0CGE,QAAQ,IAAIE,QAAZ,iBACC,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,UAAU,EAAC;AAAxC,KACGA,QADH,CA3CJ,CADF;AAkDD,CArEM;;;AAAMP,M;AAuEb,IAAMiB,MAAM,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8CACQ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACb,QAAN,GAAiB,MAAjB,GAA0B,MAAtC;AAAA,CADR,CAAZ;AAKAW,MAAM,CAACG,WAAP,GAAqB,QAArB","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { SansSize } from \"../../Theme\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Sans } from \"../Typography\"\n\n/**\n * @deprecated Use `Expandable` instead.\n */\nexport interface ToggleProps extends FlexProps {\n  chevronSize?: number\n  disabled?: boolean\n  expanded?: boolean\n  label?: string | JSX.Element\n  textSize?: SansSize\n  /**\n   * Adds the ability to render a set of components by the chevron for\n   * secondary actions such as clearing filters\n   */\n  renderSecondaryAction?: (\n    toggleProps: Pick<ToggleProps, \"disabled\" | \"expanded\" | \"textSize\">\n  ) => JSX.Element\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\nexport interface ToggleState {\n  disabled: boolean\n  expanded: boolean\n}\n\n/**\n * A toggle component used to show / hide / expand content\n * @deprecated Use `Expandable`\n */\nexport const Toggle: React.FC<ToggleProps> = ({\n  label,\n  textSize = \"2\",\n  chevronSize = 12,\n  expanded: defaultExpanded,\n  disabled,\n  children,\n  renderSecondaryAction,\n  onClick,\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const toggleExpand = () => {\n    if (!disabled) {\n      setExpanded((prevExpanded) => !prevExpanded)\n    }\n  }\n\n  return (\n    <Flex width=\"100%\" flexDirection=\"column\" pb={2} {...rest}>\n      <Header\n        onClick={(e) => {\n          toggleExpand()\n          !(onClick === undefined) && onClick(e)\n        }}\n        disabled={disabled}\n        borderTop=\"1px solid\"\n        borderColor=\"black10\"\n        pt={2}\n        aria-expanded={expanded}\n      >\n        <Flex justifyContent=\"space-between\" alignItems=\"center\">\n          {typeof label === \"string\" ? (\n            <Sans\n              size={textSize as SansSize}\n              weight=\"medium\"\n              color=\"black100\"\n              my={0.5}\n            >\n              {label}\n            </Sans>\n          ) : (\n            label\n          )}\n\n          <Flex justifyContent=\"right\" alignItems=\"center\">\n            {renderSecondaryAction &&\n              renderSecondaryAction({ disabled, expanded, textSize })}\n\n            <ChevronIcon\n              style={{ visibility: disabled ? \"hidden\" : \"visible\" }}\n              direction={expanded ? \"up\" : \"down\"}\n              width={chevronSize}\n              height={chevronSize}\n              ml={1}\n              aria-hidden=\"true\"\n            />\n          </Flex>\n        </Flex>\n      </Header>\n\n      {expanded && children && (\n        <Flex flexDirection=\"column\" alignItems=\"left\">\n          {children}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nconst Header = styled(Clickable)`\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n  user-select: none;\n`\n\nHeader.displayName = \"Header\"\n"],"file":"Toggle.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -177,5 +177,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "97850d949cd36d54bdb98966897bf3482165ce3b"
+  "gitHead": "e2b3aecc040aa872f20a069092a5dba781ecde98"
 }

package/dist/elements/Toggle/Toggle.story.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => JSX.Element;

package/dist/elements/Toggle/Toggle.story.js

@@ -1,65 +0,0 @@
-"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 _Link = require("../Link");
-
-var _Text = require("../Text");
-
-var _Toggle = require("./Toggle");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var SecondaryAction = function SecondaryAction() {
-  return /*#__PURE__*/_react.default.createElement(_Link.Link, {
-    onClick: function onClick(e) {
-      alert("hello world!");
-      e.stopPropagation();
-    }
-  }, "Alert");
-};
-
-SecondaryAction.displayName = "SecondaryAction";
-var _default = {
-  title: "Components/Toggle"
-};
-exports.default = _default;
-
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      expanded: true
-    }, {
-      expanded: false,
-      disabled: true
-    }, {
-      expanded: true,
-      disabled: true
-    }, {
-      renderSecondaryAction: SecondaryAction
-    }, {
-      renderSecondaryAction: SecondaryAction,
-      disabled: true
-    }, {
-      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "mediumText"
-      }, "Heading"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "text"
-      }, "Subheading"))
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, {
-    label: "Example",
-    maxWidth: 350
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content")));
-};
-
-exports.Default = Default;
-Default.displayName = "Default";
-//# sourceMappingURL=Toggle.story.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/elements/Toggle/Toggle.story.tsx"],"names":["SecondaryAction","e","alert","stopPropagation","title","Default","expanded","disabled","renderSecondaryAction","label"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,sBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdC,MAAAA,KAAK,CAAC,cAAD,CAAL;AACAD,MAAAA,CAAC,CAACE,eAAF;AACD;AAJH,aADF;AAUD,CAXD;;AAAMH,e;eAaS;AACbI,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,qBAAqB,EAAER;AAAzB,KALM,EAMN;AAAEQ,MAAAA,qBAAqB,EAAER,eAAzB;AAA0CO,MAAAA,QAAQ,EAAE;AAApD,KANM,EAON;AACEE,MAAAA,KAAK,eACH,yEACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,sBAFF;AAFJ,KAPM;AADV,kBAkBE,6BAAC,cAAD;AAAQ,IAAA,KAAK,EAAC,SAAd;AAAwB,IAAA,QAAQ,EAAE;AAAlC,kBACE,6BAAC,UAAD,2BADF,CAlBF,CADF;AAwBD,CAzBM;;;AAAMJ,O","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Link } from \"../Link\"\nimport { Text } from \"../Text\"\nimport { Toggle, ToggleProps } from \"./Toggle\"\n\nconst SecondaryAction = () => {\n  return (\n    <Link\n      onClick={(e) => {\n        alert(\"hello world!\")\n        e.stopPropagation()\n      }}\n    >\n      Alert\n    </Link>\n  )\n}\n\nexport default {\n  title: \"Components/Toggle\",\n}\n\nexport const Default = () => {\n  return (\n    <States<ToggleProps>\n      states={[\n        {},\n        { expanded: true },\n        { expanded: false, disabled: true },\n        { expanded: true, disabled: true },\n        { renderSecondaryAction: SecondaryAction },\n        { renderSecondaryAction: SecondaryAction, disabled: true },\n        {\n          label: (\n            <>\n              <Text variant=\"mediumText\">Heading</Text>\n              <Text variant=\"text\">Subheading</Text>\n            </>\n          ),\n        },\n      ]}\n    >\n      <Toggle label=\"Example\" maxWidth={350}>\n        <Text>Expanded content</Text>\n      </Toggle>\n    </States>\n  )\n}\n"],"file":"Toggle.story.js"}