@artsy/palette 19.6.0 → 19.7.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# v19.7.0 (Fri May 13 2022)
+
+#### 🚀  Enhancement
+
+- feat(range): implements range [#1154](https://github.com/artsy/palette/pull/1154) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- feat(range): implements range ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v19.6.0 (Thu May 05 2022)
 
 #### 🚀  Enhancement

package/dist/elements/BaseTabs/BaseTab.d.ts

@@ -23,7 +23,7 @@ export declare type BaseTabProps = TextProps & {
  * E.g.: `<BaseTab as={RouterLink} to="/foo">Foo</BaseTab>`
  * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
  */
-export declare const BaseTab: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+export declare const BaseTab: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
     variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
@@ -31,7 +31,7 @@ export declare const BaseTab: import("styled-components").StyledComponentClass<i
     overflowEllipsis?: boolean | undefined;
     textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: import("styled-system").ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-} & BaseTabProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+} & BaseTabProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
     variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BorderBoxProps } from "./BorderBoxBase";
 /**
  * A `div` that has a common border and padding set by default, with an optional

package/dist/elements/BorderBox/BorderBoxBase.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FlexProps } from "../Flex";
 export interface BorderBoxProps extends FlexProps {
     hover?: boolean;

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -110,14 +110,14 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
@@ -144,47 +144,47 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "false" | "true" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "false" | "true" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "false" | "true" | "listbox" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "false" | "true" | "mixed" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/dist/elements/Box/Box.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
 export interface BoxProps extends BackgroundProps, BorderProps, Omit<ColorProps, "color">, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps {
 }

package/dist/elements/CSSGrid/CSSGrid.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GridProps } from "styled-system";
 import { BoxProps } from "../Box";
 /**

package/dist/elements/Carousel/Carousel.d.ts

@@ -8,15 +8,15 @@ export declare type CarouselRailProps = BoxProps & {
     transition?: ResponsiveValue<string>;
 };
 /** A `CarouselRail` slides back and forth within the viewport */
-export declare const CarouselRail: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & {
+export declare const CarouselRail: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps & {
     transition?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & {
+}, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps & {
     transition?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;
 /** CarouselCellProps */
 export declare type CarouselCellProps = BoxProps;
 /** A `CarouselCell` wraps a single child in the carousel */
-export declare const CarouselCell: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps>;
+export declare const CarouselCell: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps>;
 /**
  * We share this spacing value with the `Swiper` component
  */

package/dist/elements/Carousel/CarouselNavigation.d.ts

@@ -5,20 +5,20 @@ export declare type CarouselNavigationProps = ClickableProps;
 /**
  * Default next button
  */
-export declare const CarouselNext: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+export declare const CarouselNext: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+}, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;
 /**
  * Default previous button
  */
-export declare const CarouselPrevious: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+export declare const CarouselPrevious: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+}, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;

package/dist/elements/Clickable/Clickable.d.ts

@@ -10,10 +10,10 @@ export declare type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElemen
  * Clickable is a utility component useful for wrapping things like <div>s
  * without having to deal with the requirements to make the <div> accessible.
  */
-export declare const Clickable: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
+export declare const Clickable: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
     cursor?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
+}, any, React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
     cursor?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;

package/dist/elements/Flex/Flex.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BoxProps } from "../Box";
 /**
  * Flex is Box with display: flex

package/dist/elements/FullBleed/FullBleed.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BoxProps } from "../Box";
 /** FullBleedProps */
 export declare type FullBleedProps = BoxProps;

package/dist/elements/GridColumns/GridColumns.d.ts

@@ -8,7 +8,7 @@ export declare type GridColumnsProps = Omit<CSSGridProps, "gridTemplateColumns">
 /**
  * A 12-column fluid grid
  */
-export declare const GridColumns: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & CSSGridProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & CSSGridProps>;
+export declare const GridColumns: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps & CSSGridProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps & CSSGridProps>;
 declare type CellProps = ColumnCell & GridColumnProps & BoxProps;
 /** Column implements `Box` and `gridColumn` */
 export declare type ColumnProps = CellProps & {

package/dist/elements/Link/Link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Color } from "../../Theme";
 import { BoxProps } from "../Box";
 declare type UnderlineBehaviors = "default" | "hover" | "none";

package/dist/elements/Modal/ModalBase.js

@@ -142,8 +142,14 @@ var _ModalBase = function _ModalBase(_ref) {
   (0, _react.useEffect)(function () {
     var updateMaxHeight = function updateMaxHeight() {
       setMaxHeight(window.innerHeight);
-    };
+    }; // Due to the dialog being portaled; we need to wait until the next tick
+    // before we can perform any operations that rely on the sizing of elements.
+    // Presumably anything that relies on this also listens to resize for updates.
+
 
+    setTimeout(function () {
+      window.dispatchEvent(new Event("resize"));
+    }, 0);
     window.addEventListener("resize", updateMaxHeight, {
       passive: true
     });

package/dist/elements/Modal/ModalBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/ModalBase.tsx"],"names":["ScrollIsolation","RemoveScroll","Container","Flex","systemZIndex","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","props","window","_ModalBase","children","zIndex","dialogProps","onClose","rest","containerEl","scrollIsolationEl","handleMouseDown","event","target","current","ref","handleKeydown","key","preventDefault","stopPropagation","document","addEventListener","removeEventListener","innerHeight","maxHeight","setMaxHeight","updateMaxHeight","passive","createPortal","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { useFocusLock } from \"../../utils/useFocusLock\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Flex, FlexProps } from \"../Flex\"\n\n// TODO: Update TypeScript definitions for this library\n// https://github.com/theKashey/react-remove-scroll\nconst ScrollIsolation = styled(RemoveScroll as any)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<ModalBaseProps> = (props) => {\n  if (typeof window === \"undefined\") {\n    return null\n  }\n  return <_ModalBase {...props} />\n}\n\nexport const _ModalBase: React.FC<ModalBaseProps> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const scrollIsolationEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === scrollIsolationEl.current) {\n      onClose()\n    }\n  }\n\n  useFocusLock({ ref: containerEl })\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container ref={containerEl as any} zIndex={zIndex} {...rest}>\n      <ScrollIsolation\n        ref={scrollIsolationEl as any}\n        onMouseDown={handleMouseDown}\n      >\n        <Dialog maxHeight={maxHeight} {...dialogProps}>\n          {children}\n        </Dialog>\n      </ScrollIsolation>\n    </Container>\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"file":"ModalBase.js"}
+{"version":3,"sources":["../../../src/elements/Modal/ModalBase.tsx"],"names":["ScrollIsolation","RemoveScroll","Container","Flex","systemZIndex","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","props","window","_ModalBase","children","zIndex","dialogProps","onClose","rest","containerEl","scrollIsolationEl","handleMouseDown","event","target","current","ref","handleKeydown","key","preventDefault","stopPropagation","document","addEventListener","removeEventListener","innerHeight","maxHeight","setMaxHeight","updateMaxHeight","setTimeout","dispatchEvent","Event","passive","createPortal","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { useFocusLock } from \"../../utils/useFocusLock\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Flex, FlexProps } from \"../Flex\"\n\n// TODO: Update TypeScript definitions for this library\n// https://github.com/theKashey/react-remove-scroll\nconst ScrollIsolation = styled(RemoveScroll as any)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<ModalBaseProps> = (props) => {\n  if (typeof window === \"undefined\") {\n    return null\n  }\n  return <_ModalBase {...props} />\n}\n\nexport const _ModalBase: React.FC<ModalBaseProps> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const scrollIsolationEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === scrollIsolationEl.current) {\n      onClose()\n    }\n  }\n\n  useFocusLock({ ref: containerEl })\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    // Due to the dialog being portaled; we need to wait until the next tick\n    // before we can perform any operations that rely on the sizing of elements.\n    // Presumably anything that relies on this also listens to resize for updates.\n    setTimeout(() => {\n      window.dispatchEvent(new Event(\"resize\"))\n    }, 0)\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container ref={containerEl as any} zIndex={zIndex} {...rest}>\n      <ScrollIsolation\n        ref={scrollIsolationEl as any}\n        onMouseDown={handleMouseDown}\n      >\n        <Dialog maxHeight={maxHeight} {...dialogProps}>\n          {children}\n        </Dialog>\n      </ScrollIsolation>\n    </Container>\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"file":"ModalBase.js"}

package/dist/elements/Radio/RadioDot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface CheckProps {
     disabled?: boolean;
     error?: boolean;

package/dist/elements/Range/Range.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { BoxProps } from "../Box";
+export declare const RANGE_HANDLE_SIZE = 24;
+export interface RangeProps extends BoxProps {
+    min: number;
+    max: number;
+    step: number;
+    value?: number[];
+    onChange?: (range: [min: number, max: number]) => void;
+}
+export declare const Range: React.FC<RangeProps>;

package/dist/elements/Range/Range.js

@@ -0,0 +1,179 @@
+"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.Range = exports.RANGE_HANDLE_SIZE = void 0;
+
+var _themeGet = require("@styled-system/theme-get");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _helpers = require("../../helpers");
+
+var _remapValue = require("../../utils/remapValue");
+
+var _Box = require("../Box");
+
+var _Flex = require("../Flex");
+
+var _excluded = ["min", "max", "step", "value", "onChange"];
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var RANGE_HANDLE_SIZE = 24;
+exports.RANGE_HANDLE_SIZE = RANGE_HANDLE_SIZE;
+
+var Range = function Range(_ref) {
+  var min = _ref.min,
+      max = _ref.max,
+      step = _ref.step,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? [0, max] : _ref$value,
+      onChange = _ref.onChange,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var minRef = (0, React.useRef)(null);
+  var maxRef = (0, React.useRef)(null);
+
+  var _useState = (0, React.useState)(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1];
+
+  var _useState3 = (0, React.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      maxWidth = _useState4[0],
+      setMaxWidth = _useState4[1];
+
+  var handleMinChange = function handleMinChange(_ref2) {
+    var value = _ref2.target.valueAsNumber;
+    if (value > values[1]) return;
+    setValues([value, values[1]]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([value, values[1]]);
+  };
+
+  var handleMaxChange = function handleMaxChange(_ref3) {
+    var value = _ref3.target.valueAsNumber;
+    if (value < values[0]) return;
+    setValues([values[0], value]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([values[0], value]);
+  };
+
+  (0, React.useEffect)(function () {
+    if (!maxRef.current) return;
+    setMaxWidth(maxRef.current.offsetWidth);
+  }, []);
+  (0, React.useEffect)(function () {
+    var handleResize = function handleResize() {
+      if (!maxRef.current) return;
+      setMaxWidth(maxRef.current.offsetWidth);
+    };
+
+    window.addEventListener("resize", handleResize, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  var selectionRectangle = "rect(0, ".concat((0, _remapValue.remapValue)(values[1], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px, 2px, ").concat((0, _remapValue.remapValue)(values[0], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px)");
+  var maxRectangle = "rect(0, ".concat(maxWidth, "px, ").concat(RANGE_HANDLE_SIZE, "px, ").concat((0, _remapValue.remapValue)(values[1], {
+    min: min,
+    max: max
+  }, {
+    min: 0,
+    max: maxWidth - RANGE_HANDLE_SIZE
+  }), "px)");
+  return /*#__PURE__*/React.createElement(Track, rest, /*#__PURE__*/React.createElement(Selection, {
+    style: {
+      clip: selectionRectangle
+    }
+  }), /*#__PURE__*/React.createElement(Slider, {
+    ref: minRef,
+    min: min,
+    max: max,
+    step: step,
+    onInput: handleMinChange,
+    value: values[0]
+  }), /*#__PURE__*/React.createElement(Slider, {
+    ref: maxRef,
+    min: min,
+    max: max,
+    step: step,
+    onInput: handleMaxChange,
+    value: values[1],
+    style: {
+      clip: maxRectangle
+    }
+  }), /*#__PURE__*/React.createElement(Shadow, {
+    left: (0, _remapValue.remapValue)(values[1], {
+      min: min,
+      max: max
+    }, {
+      min: 0,
+      max: maxWidth - RANGE_HANDLE_SIZE
+    })
+  }));
+};
+
+exports.Range = Range;
+Range.displayName = "Range";
+var Track = (0, _styledComponents.default)(_Flex.Flex).withConfig({
+  displayName: "Range__Track",
+  componentId: "si9a6m-0"
+})(["align-items:center;position:relative;height:", "px;&:before{content:\"\";display:block;position:absolute;height:2px;left:0;right:0;top:50%;margin-top:-1px;background-color:", ";}"], RANGE_HANDLE_SIZE, (0, _themeGet.themeGet)("colors.black30"));
+var Shadow = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Range__Shadow",
+  componentId: "si9a6m-1"
+})(["position:absolute;width:", "px;height:", "px;top:50%;margin-top:-", "px;background-color:transparent;pointer-events:none;border-radius:50%;box-shadow:", ";"], RANGE_HANDLE_SIZE, RANGE_HANDLE_SIZE, RANGE_HANDLE_SIZE / 2, _helpers.FLAT_SHADOW);
+var Selection = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Range__Selection",
+  componentId: "si9a6m-2"
+})(["position:absolute;height:2px;left:0;right:0;top:50%;margin-top:-1px;background-color:", ";"], (0, _themeGet.themeGet)("colors.brand"));
+var railStyles = (0, _styledComponents.css)(["width:100%;height:", "px;"], RANGE_HANDLE_SIZE);
+var handleStyles = (0, _styledComponents.css)(["user-select:none;cursor:grab;width:", "px;height:", "px;background-color:", ";border-radius:50%;border:1px solid ", ";"], RANGE_HANDLE_SIZE, RANGE_HANDLE_SIZE, (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("colors.black10"));
+
+var Slider = _styledComponents.default.input.withConfig({
+  displayName: "Range__Slider",
+  componentId: "si9a6m-3"
+})(["appearance:none;background:transparent;position:relative;margin:0;width:100%;position:absolute;top:0;left:0;&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}&::-webkit-slider-thumb{-webkit-appearance:none;", "}&::-moz-range-thumb{", "}&:active{&::-webkit-slider-thumb{box-shadow:none;background-color:", ";}&::-moz-range-thumb{box-shadow:none;background-color:", ";}}&:first-of-type{&::-webkit-slider-thumb{box-shadow:", ";}&::-moz-range-thumb{box-shadow:", ";}}"], railStyles, railStyles, handleStyles, handleStyles, (0, _themeGet.themeGet)("colors.black5"), (0, _themeGet.themeGet)("colors.black5"), _helpers.FLAT_SHADOW, _helpers.FLAT_SHADOW);
+
+Slider.defaultProps = {
+  type: "range"
+};
+//# sourceMappingURL=Range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","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  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  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      />\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      />\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/Range/Range.story.d.ts

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

package/dist/elements/Range/Range.story.js

@@ -0,0 +1,139 @@
+"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.default = exports.WithinModal = exports.InContext = exports.Default = void 0;
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _storybookStates = require("storybook-states");
+
+var _Box = require("../Box");
+
+var _Modal = require("../Modal");
+
+var _Range = require("./Range");
+
+var _LabeledInput = require("../LabeledInput");
+
+var _Flex = require("../Flex");
+
+var _ = require("../..");
+
+var _Text = require("../Text");
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = {
+  title: "Components/Range"
+};
+exports.default = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      value: [1100, 3450]
+    }, {
+      step: 1,
+      max: 10
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Range.Range, {
+    min: 0,
+    max: 5000,
+    step: 10,
+    onChange: (0, _addonActions.action)("onChange")
+  }));
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+
+var WithinModal = function WithinModal() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalBase, {
+    width: "100%",
+    height: "100%",
+    dialogProps: {
+      width: 400,
+      height: 400,
+      bg: "black5"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    width: 400,
+    height: 400
+  }, /*#__PURE__*/_react.default.createElement(_Range.Range, {
+    min: 0,
+    max: 5000,
+    step: 10,
+    onChange: (0, _addonActions.action)("onChange")
+  })));
+};
+
+exports.WithinModal = WithinModal;
+WithinModal.displayName = "WithinModal";
+
+var InContext = function InContext() {
+  var _useState = (0, _react.useState)([0, 50000]),
+      _useState2 = _slicedToArray(_useState, 2),
+      _useState2$ = _slicedToArray(_useState2[0], 2),
+      min = _useState2$[0],
+      max = _useState2$[1],
+      setMinMax = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    p: 2,
+    border: "1px solid",
+    borderColor: "black10",
+    width: 375
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_LabeledInput.LabeledInput, {
+    title: "Min",
+    label: "$USD",
+    flex: 1,
+    value: min
+  }), /*#__PURE__*/_react.default.createElement(_.Spacer, {
+    ml: 1
+  }), /*#__PURE__*/_react.default.createElement(_LabeledInput.LabeledInput, {
+    title: "Max",
+    label: "$USD",
+    flex: 1,
+    value: max
+  })), /*#__PURE__*/_react.default.createElement(_.Spacer, {
+    mt: 1
+  }), /*#__PURE__*/_react.default.createElement(_Range.Range, {
+    min: 0,
+    max: 50000,
+    step: 100,
+    value: [min, max],
+    onChange: setMinMax
+  }), /*#__PURE__*/_react.default.createElement(_.Spacer, {
+    mt: 0.5
+  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    justifyContent: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "xs"
+  }, "$0"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "xs"
+  }, "$50000+")));
+};
+
+exports.InContext = InContext;
+InContext.displayName = "InContext";
+//# sourceMappingURL=Range.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Range/Range.story.tsx"],"names":["title","Default","value","step","max","WithinModal","width","height","bg","InContext","min","setMinMax"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { ModalBase } from \"../Modal\"\nimport { Range, RangeProps } from \"./Range\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../..\"\nimport { Text } from \"../Text\"\n\nexport default {\n  title: \"Components/Range\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<RangeProps>>\n      states={[{}, { value: [1100, 3450] }, { step: 1, max: 10 }]}\n    >\n      <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n    </States>\n  )\n}\n\nexport const WithinModal = () => {\n  return (\n    <ModalBase\n      width=\"100%\"\n      height=\"100%\"\n      dialogProps={{ width: 400, height: 400, bg: \"black5\" }}\n    >\n      <Box width={400} height={400}>\n        <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n      </Box>\n    </ModalBase>\n  )\n}\n\nexport const InContext = () => {\n  const [[min, max], setMinMax] = useState<number[]>([0, 50000])\n\n  return (\n    <Box p={2} border=\"1px solid\" borderColor=\"black10\" width={375}>\n      <Flex>\n        <LabeledInput title=\"Min\" label=\"$USD\" flex={1} value={min} />\n\n        <Spacer ml={1} />\n\n        <LabeledInput title=\"Max\" label=\"$USD\" flex={1} value={max} />\n      </Flex>\n\n      <Spacer mt={1} />\n\n      <Range\n        min={0}\n        max={50000}\n        step={100}\n        value={[min, max]}\n        onChange={setMinMax}\n      />\n\n      <Spacer mt={0.5} />\n\n      <Flex justifyContent=\"space-between\">\n        <Text variant=\"xs\">$0</Text>\n\n        <Text variant=\"xs\">$50000+</Text>\n      </Flex>\n    </Box>\n  )\n}\n"],"file":"Range.story.js"}

package/dist/elements/Range/index.d.ts

@@ -0,0 +1 @@
+export * from "./Range";

package/dist/elements/Range/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Range = require("./Range");
+
+Object.keys(_Range).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Range[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Range[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Range/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Range\"\n"],"file":"index.js"}

package/dist/elements/Separator/Separator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BorderProps, ColorProps, SpaceProps, WidthProps } from "styled-system";
 export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps, ColorProps {
 }

package/dist/elements/Shelf/useClickScroll.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface UseClickScroll {
     trackRef?: React.MutableRefObject<HTMLElement | null>;
     thumbRef?: React.MutableRefObject<HTMLElement | null>;

package/dist/elements/Shelf/useDragScroll.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface UseDragScroll {
     viewport?: HTMLElement | null;
     thumbRef?: React.MutableRefObject<HTMLElement | null>;

package/dist/elements/StackableBorderBox/StackableBorderBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BorderBoxProps } from "../BorderBox/BorderBoxBase";
 /**
  * A stackable border box is a BorderBox that shares borders with its siblings.

package/dist/elements/Sup/Sup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextProps } from "../Text";
 export declare type SupProps = TextProps;
 export declare const Sup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {

package/dist/elements/Swiper/Swiper.d.ts

@@ -3,11 +3,11 @@ import { BoxProps } from "../Box";
 /** SwiperRailProps */
 export declare type SwiperRailProps = BoxProps;
 /** A `SwiperRail` slides back and forth within the viewport */
-export declare const SwiperRail: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps>;
+export declare const SwiperRail: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps>;
 /** SwiperCellProps */
 export declare type SwiperCellProps = BoxProps;
 /** A `SwiperCell` wraps a single child in the carousel */
-export declare const SwiperCell: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps>;
+export declare const SwiperCell: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps>;
 declare type ScrollSnapAlign = "none" | "start" | "end" | "center";
 /** SwiperProps */
 export declare type SwiperProps = BoxProps & {

package/dist/elements/Text/Text.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextVariant } from "@artsy/palette-tokens/dist/typography/types";
 import { ColorProps, ResponsiveValue, TypographyProps } from "styled-system";
 import { Color } from "../../Theme";

package/dist/elements/Typography/Typography.d.ts

@@ -26,7 +26,7 @@ interface TextProps extends ColorProps, FontSizeProps, LineHeightProps, MaxWidth
     element?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
 }
 /** Base Text component for typography */
-export declare const BaseText: StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TextProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TextProps>;
+export declare const BaseText: StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & TextProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & TextProps>;
 /**
  * The supported typefaces
  */
@@ -114,7 +114,7 @@ export declare const Sans: StyledComponentClass<SansProps, any, {
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     italic?: boolean | undefined;
     weight?: "medium" | "regular" | null | undefined;
-    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
+    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
     unstable_trackIn?: boolean | undefined;
@@ -189,7 +189,7 @@ export declare const Serif: StyledComponentClass<SerifProps, any, {
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     italic?: boolean | undefined;
     weight?: "regular" | "semibold" | null | undefined;
-    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
+    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
     unstable_trackIn?: boolean | undefined;
@@ -257,7 +257,7 @@ export declare const Display: StyledComponentClass<DisplayProps, any, {
     fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     weight?: "regular" | null | undefined;
-    element?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
+    element?: React.ComponentType<any> | keyof JSX.IntrinsicElements | undefined;
     numberOfLines?: number | undefined;
     ellipsizeMode?: string | undefined;
 } & {

package/dist/elements/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BoxProps } from "../Box";
 /**
  * Visually the hide element, but present in DOM so that it is accessible

package/dist/elements/index.d.ts

@@ -49,6 +49,7 @@ export * from "./ProgressBarTimer";
 export * from "./ProgressDots";
 export * from "./Radio";
 export * from "./RadioGroup";
+export * from "./Range";
 export * from "./ReadMore";
 export * from "./ResponsiveBox";
 export * from "./Select";

package/dist/elements/index.js

@@ -667,6 +667,19 @@ Object.keys(_RadioGroup).forEach(function (key) {
   });
 });
 
+var _Range = require("./Range");
+
+Object.keys(_Range).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Range[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Range[key];
+    }
+  });
+});
+
 var _ReadMore = require("./ReadMore");
 
 Object.keys(_ReadMore).forEach(function (key) {

package/dist/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Badge\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./Colors\"\nexport * from \"./CSSGrid\"\nexport * from \"./Dialog\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./FilterSelect\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./Grid\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./IconButton\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Marquee\"\nexport * from \"./Menu\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./ModalDialog\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressBarTimer\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./ShowMore\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./StaticCountdownTimer\"\nexport * from \"./Stepper\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Tags\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./TimeRemaining\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./Typography\"\nexport * from \"./VisuallyHidden\"\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Badge\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./Colors\"\nexport * from \"./CSSGrid\"\nexport * from \"./Dialog\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./FilterSelect\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./Grid\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./IconButton\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Marquee\"\nexport * from \"./Menu\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./ModalDialog\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressBarTimer\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./Range\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./ShowMore\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./StaticCountdownTimer\"\nexport * from \"./Stepper\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Tags\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./TimeRemaining\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./Typography\"\nexport * from \"./VisuallyHidden\"\n"],"file":"index.js"}

package/dist/svgs/Icon.d.ts

@@ -6,7 +6,7 @@ export interface IconProps extends React.SVGProps<any>, SpaceProps, PositionProp
     title?: string;
 }
 /** Wrapper for icons to include space */
-export declare const Icon: import("styled-components").StyledComponentClass<import("react").SVGProps<SVGSVGElement> & IconProps, any, import("react").SVGProps<SVGSVGElement> & IconProps>;
+export declare const Icon: import("styled-components").StyledComponentClass<React.SVGProps<SVGSVGElement> & IconProps, any, React.SVGProps<SVGSVGElement> & IconProps>;
 /** Compatibility component used to normalize paths between react dom and react native */
 export declare const Path: FC<JSX.IntrinsicElements["path"]>;
 /** Compatibility component used to normalize titles between react dom and react native */

package/dist/utils/remapValue.d.ts

@@ -0,0 +1,15 @@
+declare type Range = {
+    min: number;
+    max: number;
+};
+/**
+ * Remaps a value from within one range to its corresponding value in another range.
+ * E.g. convert between units or proportionally scale a value.
+ *
+ * @param n A numeric value
+ * @param from Range the value comes from
+ * @param to Range you wish to remap the value onto
+ * @returns The remapped numeric value
+ */
+export declare const remapValue: (n: number, from: Range, to: Range) => number;
+export {};

package/dist/utils/remapValue.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.remapValue = void 0;
+
+/**
+ * Remaps a value from within one range to its corresponding value in another range.
+ * E.g. convert between units or proportionally scale a value.
+ *
+ * @param n A numeric value
+ * @param from Range the value comes from
+ * @param to Range you wish to remap the value onto
+ * @returns The remapped numeric value
+ */
+var remapValue = function remapValue(n, from, to) {
+  return (n - from.min) * (to.max - to.min) / (from.max - from.min) + to.min;
+};
+
+exports.remapValue = remapValue;
+//# sourceMappingURL=remapValue.js.map

package/dist/utils/remapValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/remapValue.ts"],"names":["remapValue","n","from","to","min","max"],"mappings":";;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAYC,IAAZ,EAAyBC,EAAzB,EAAuC;AAC/D,SAAQ,CAACF,CAAC,GAAGC,IAAI,CAACE,GAAV,KAAkBD,EAAE,CAACE,GAAH,GAASF,EAAE,CAACC,GAA9B,CAAD,IAAwCF,IAAI,CAACG,GAAL,GAAWH,IAAI,CAACE,GAAxD,IAA+DD,EAAE,CAACC,GAAzE;AACD,CAFM","sourcesContent":["type Range = { min: number; max: number }\n\n/**\n * Remaps a value from within one range to its corresponding value in another range.\n * E.g. convert between units or proportionally scale a value.\n *\n * @param n A numeric value\n * @param from Range the value comes from\n * @param to Range you wish to remap the value onto\n * @returns The remapped numeric value\n */\nexport const remapValue = (n: number, from: Range, to: Range) => {\n  return ((n - from.min) * (to.max - to.min)) / (from.max - from.min) + to.min\n}\n"],"file":"remapValue.js"}

package/dist/utils/useClickOutside.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface UseClickOutside {
     ref: React.RefObject<HTMLElement>;
     when: boolean;

package/dist/utils/usePortal.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 export declare const usePortal: () => {
-    createPortal: (children: React.ReactNode) => import("react").ReactPortal | null;
+    createPortal: (children: React.ReactNode) => React.ReactPortal | null;
 };

package/dist/utils/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/usePortal.ts"],"names":["usePortal","appendEl","el","current","document","createElement","body","appendChild","removeChild","createPortal","children","window"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;AAEA,wBAAU,YAAM;AAAA;;AACd,QAAMC,EAAE,wBAAGD,QAAQ,CAACE,OAAZ,iEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEAE,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BL,EAA1B;AAEA,WAAO,YAAM;AACXE,MAAAA,QAAQ,CAACE,IAAT,CAAcE,WAAd,CAA0BN,EAA1B;AACD,KAFD;AAGD,GATD,EASG,EATH;AAWA,MAAMO,YAAY,GAAG,wBAAY,UAACC,QAAD,EAA+B;AAAA;;AAC9D,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC,OAAO,IAAP,CAD2B,CAG9D;;AACA,QAAMT,EAAE,yBAAGD,QAAQ,CAACE,OAAZ,mEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEA,wBAAO,4BAAiBQ,QAAjB,EAA2BR,EAA3B,CAAP;AACD,GARoB,EAQlB,EARkB,CAArB;AAUA,SAAO;AAAEO,IAAAA,YAAY,EAAZA;AAAF,GAAP;AACD,CAzBM","sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      document.body.removeChild(el)\n    }\n  }, [])\n\n  const createPortal = useCallback((children: React.ReactNode) => {\n    if (typeof window === \"undefined\") return null\n\n    // May execute before effect runs and appendEl is set\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    return __createPortal__(children, el)\n  }, [])\n\n  return { createPortal }\n}\n"],"file":"usePortal.js"}
+{"version":3,"sources":["../../src/utils/usePortal.ts"],"names":["usePortal","appendEl","el","current","document","createElement","body","appendChild","removeChild","createPortal","children","window"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;AAEA,wBAAU,YAAM;AAAA;;AACd,QAAMC,EAAE,wBAAGD,QAAQ,CAACE,OAAZ,iEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEAE,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BL,EAA1B;AAEA,WAAO,YAAM;AACXE,MAAAA,QAAQ,CAACE,IAAT,CAAcE,WAAd,CAA0BN,EAA1B;AACD,KAFD;AAGD,GATD,EASG,EATH;AAWA,MAAMO,YAAY,GAAG,wBACnB,UAACC,QAAD,EAAyD;AAAA;;AACvD,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC,OAAO,IAAP,CADoB,CAGvD;;AACA,QAAMT,EAAE,yBAAGD,QAAQ,CAACE,OAAZ,mEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEA,wBAAO,4BAAiBQ,QAAjB,EAA2BR,EAA3B,CAAP;AACD,GATkB,EAUnB,EAVmB,CAArB;AAaA,SAAO;AAAEO,IAAAA,YAAY,EAAZA;AAAF,GAAP;AACD,CA5BM","sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      document.body.removeChild(el)\n    }\n  }, [])\n\n  const createPortal = useCallback(\n    (children: React.ReactNode): React.ReactPortal | null => {\n      if (typeof window === \"undefined\") return null\n\n      // May execute before effect runs and appendEl is set\n      const el = appendEl.current ?? document.createElement(\"div\")\n      appendEl.current = el\n\n      return __createPortal__(children, el)\n    },\n    []\n  )\n\n  return { createPortal }\n}\n"],"file":"usePortal.js"}

package/dist/utils/useWidthOf.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface UseWidthOf {
     ref: React.MutableRefObject<HTMLElement | null>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.6.0",
+  "version": "19.7.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -123,7 +123,7 @@
     "luxon": "^1.15",
     "proportional-scale": "^4.0.0",
     "react-lazy-load-image-component": "1.5.0",
-    "react-remove-scroll": "^2.3.0",
+    "react-remove-scroll": "2.5.0",
     "styled-bootstrap-grid": "3.1.0",
     "styled-system": "^5.1.5",
     "trunc-html": "^1.1.2",
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "d3c41d9ad04611139d903b5b00cf549cc4372240"
+  "gitHead": "1fad0d96c1c0f9e8f8b75cd481df9d461ba438f9"
 }