npm - @artsy/palette - Versions diffs - 45.14.0-canary.1497.33065.0 → 45.14.0-canary.1497.33070.0 - Mend

@artsy/palette 45.14.0-canary.1497.33065.0 → 45.14.0-canary.1497.33070.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/dist/esm/elements/PasswordInput/PasswordInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.js","names":["React","useState","LabeledInput","Clickable","ShowIcon","HideIcon","PasswordInput","_ref","_ref$defaultVisibilit","defaultVisibility","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","visibility","setVisibility","handleClick","prevVisibility","createElement","_extends","type","label","onClick","height","displayName"],"sources":["../../../../src/elements/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport ShowIcon from \"@artsy/icons/ShowIcon\"\nimport HideIcon from \"@artsy/icons/HideIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<React.PropsWithChildren<PasswordInputProps>> = ({\n defaultVisibility = false,\n ...rest\n}) => {\n const [visibility, setVisibility] = useState(defaultVisibility)\n\n const handleClick = () => {\n setVisibility((prevVisibility) => !prevVisibility)\n }\n\n return (\n <LabeledInput\n type={visibility ? \"text\" : \"password\"}\n label={\n <Clickable onClick={handleClick} height=\"100%\">\n {visibility ? <HideIcon /> : <ShowIcon />}\n </Clickable>\n }\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;~~AAEvC~~,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,OAAOC,QAAQ,MAAM,uBAAuB;AAM5C,OAAO,IAAMC,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAG3E;EAAA,IAAAC,qBAAA,GAAAD,IAAA,CAFJE,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACtBE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,IAAAC,SAAA,~~GAAoCZ~~,QAAQ,~~CAACQ~~,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxDG,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAEhC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,aAAa,CAAC,UAACE,cAAc;MAAA,OAAK,CAACA,cAAc;IAAA,EAAC;EACpD,CAAC;EAED,~~oBACEnB~~,KAAA,~~CAAAoB~~,aAAA,CAAClB,YAAY,EAAAmB,QAAA;IACXC,IAAI,EAAEN,UAAU,GAAG,MAAM,GAAG,UAAW;IACvCO,KAAK,~~eACHvB~~,KAAA,~~CAAAoB~~,aAAA,CAACjB,SAAS;MAACqB,OAAO,EAAEN,WAAY;MAACO,MAAM,EAAC;IAAM,GAC3CT,UAAU,~~gBAAGhB~~,KAAA,~~CAAAoB~~,aAAA,CAACf,QAAQ,OAAG,~~gBAAGL~~,KAAA,~~CAAAoB~~,aAAA,CAAChB,QAAQ,OAAG;EAE5C,GACGM,IAAI,EACR;AAEN,CAAC;AArBYJ,aAAoE,CAAAoB,WAAA"}
1	+ {"version":3,"file":"PasswordInput.js","names":["React","useState","InputProps","LabeledInput","Clickable","ShowIcon","HideIcon","PasswordInput","_ref","_ref$defaultVisibilit","defaultVisibility","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","visibility","setVisibility","handleClick","prevVisibility","createElement","_extends","type","label","onClick","height","displayName"],"sources":["../../../../src/elements/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport ShowIcon from \"@artsy/icons/ShowIcon\"\nimport HideIcon from \"@artsy/icons/HideIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<React.PropsWithChildren<PasswordInputProps>> = ({\n defaultVisibility = false,\n ...rest\n}) => {\n const [visibility, setVisibility] = useState(defaultVisibility)\n\n const handleClick = () => {\n setVisibility((prevVisibility) => !prevVisibility)\n }\n\n return (\n <LabeledInput\n type={visibility ? \"text\" : \"password\"}\n label={\n <Clickable onClick={handleClick} height=\"100%\">\n {visibility ? <HideIcon /> : <ShowIcon />}\n </Clickable>\n }\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,OAAOC,QAAQ,MAAM,uBAAuB;AAM5C,OAAO,IAAMC,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAG3E;EAAA,IAAAC,qBAAA,GAAAD,IAAA,CAFJE,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACtBE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,IAAAC,SAAA,GAAoCb,QAAQ,CAACS,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxDG,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAEhC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,aAAa,CAAC,UAACE,cAAc;MAAA,OAAK,CAACA,cAAc;IAAA,EAAC;EACpD,CAAC;EAED,oBACEpB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,EAAAmB,QAAA;IACXC,IAAI,EAAEN,UAAU,GAAG,MAAM,GAAG,UAAW;IACvCO,KAAK,eACHxB,KAAA,CAAAqB,aAAA,CAACjB,SAAS;MAACqB,OAAO,EAAEN,WAAY;MAACO,MAAM,EAAC;IAAM,GAC3CT,UAAU,gBAAGjB,KAAA,CAAAqB,aAAA,CAACf,QAAQ,OAAG,gBAAGN,KAAA,CAAAqB,aAAA,CAAChB,QAAQ,OAAG;EAE5C,GACGM,IAAI,EACR;AAEN,CAAC;AArBYJ,aAAoE,CAAAoB,WAAA"}

package/dist/esm/elements/Pill/Pill.js CHANGED Viewed

@@ -7,10 +7,12 @@ import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { css } from "styled-components";
 import CloseIcon from "@artsy/icons/CloseIcon";
-import { Clickable } from "../Clickable";
+import { Clickable, ClickableProps } from "../Clickable";
 import { Sup } from "../Sup";
 import { Text } from "../Text";
 import { PILL_VARIANTS } from "./tokens";
+import { BoxProps } from "../Box";
+import { ResponsiveValue } from "styled-system";
 export var PILL_VARIANT_NAMES = ["badge", "dotted", "default", "filter", "gray", "profile", "search"];
 /** PillProps */

package/dist/esm/elements/Pill/Pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.js","names":["themeGet","React","forwardRef","styled","css","CloseIcon","Clickable","Sup","Text","PILL_VARIANTS","PILL_VARIANT_NAMES","Pill","_ref","forwardedRef","_rest$variant","children","Icon","_ref$iconPosition","iconPosition","rest","_objectWithoutProperties","_excluded","variant","compact","createElement","Container","_extends","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","overflowEllipsis","Fragment","count","selected","width","height","displayName","defaultProps","withConfig","componentId","props","_props$variant","states","default","focus","hover","active","disabled","img"],"sources":["../../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n \"badge\",\n \"dotted\",\n \"default\",\n \"filter\",\n \"gray\",\n \"profile\",\n \"search\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n \| \"active\"\n \| \"default\"\n \| \"disabled\"\n \| \"focus\"\n \| \"hover\"\n \| \"selected\"\n\n/** PillProps /\nexport type PillProps = ClickableProps & {\n as?:\n \| keyof JSX.IntrinsicElements\n \| React.ComponentType<React.PropsWithChildren<unknown>>\n /* Forces focus state /\n focus?: boolean\n /* Forces hover state /\n hover?: boolean\n /* Forces active state. This is for working with :active; not denoting a selected state /\n active?: boolean\n /* Forces selected state. Use this state to denote the selected state /\n selected?: boolean\n /* Optional icon slot /\n Icon?: React.FunctionComponent<\n React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n >\n /* Optional: Icon positioning /\n iconPosition?: \"left\" \| \"right\"\n} & (\n \| {\n variant?: Extract<\n PillVariant,\n \"badge\" \| \"default\" \| \"dotted\" \| \"filter\" \| \"gray\" \| \"search\"\n >\n }\n \| {\n /* `\"profile\"` pills have an optional `src` /\n variant?: Extract<PillVariant, \"profile\">\n /\n Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n /\n src?: string \| [string, string]\n /* Optionally switch into a condensed form /\n compact?: boolean\n }\n \| {\n /* `search` pills have an optional `count` /\n variant?: Extract<PillVariant, \"search\">\n /* Optional count /\n count?: number\n }\n )\n\n/\n A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n HTMLAnchorElement & HTMLButtonElement,\n PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n const variant =\n rest.variant === \"profile\" && rest.compact\n ? \"gray\"\n : rest.variant ?? \"default\"\n\n return (\n <Container ref={forwardedRef as any} {...rest} variant={variant}>\n {rest.variant === \"profile\" && rest.src && !rest.compact && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n {Icon && iconPosition === \"left\" && (\n <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n )}\n\n <Text\n variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n overflowEllipsis\n >\n <span>{children}</span>\n\n {rest.variant === \"search\" && \"count\" in rest && (\n <>\n {\" \"}\n <Sup>{rest.count}</Sup>\n </>\n )}\n </Text>\n\n {Icon && iconPosition === \"right\" && (\n <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n )}\n\n {((rest.variant === \"gray\" && rest.selected) \|\|\n (rest.variant === \"filter\" && rest.selected) \|\|\n (rest.variant === \"profile\" && rest.selected)) && (\n <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n )}\n </Container>\n )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n border: 1px solid ${themeGet(\"colors.mono15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n return css`\n ${states.default}\n ${props.focus && states.focus}\n ${props.hover && states.hover}\n ${props.selected && states.selected}\n ${props.active && states.active}\n ${props.disabled && states.disabled}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${props.selected && states.selected}\n }\n\n &:active {\n ${states.active}\n ${props.selected && states.selected}\n }\n\n &:disabled {\n pointer-events: none;\n ${states.disabled}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.mono30\")};\n margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":";;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,SAAS;~~AAClB~~,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,aAAa;~~AAItB~~,OAAO,IAAMC,kBAAkB,GAAG,CAChC,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,CACA;;AAYV;;AA6CA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,~~gBAAGT~~,UAAU,CAG5B,~~UAAAU~~,IAAA,EAAqDC,YAAY,EAAK;EAAA,IAAAC,aAAA;EAAA,IAAnEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IAAAC,iBAAA,GAAAL,IAAA,CAAEM,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,MAAM,GAAAA,iBAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EACjD,IAAMC,OAAO,GACXH,IAAI,CAACG,OAAO,KAAK,SAAS,IAAIH,IAAI,CAACI,OAAO,GACtC,MAAM,IAAAT,aAAA,GACNK,IAAI,CAACG,OAAO,cAAAR,aAAA,cAAAA,aAAA,GAAI,SAAS;EAE/B,~~oBACEb~~,KAAA,~~CAAAuB~~,aAAA,CAACC,SAAS,EAAAC,QAAA;IAACC,GAAG,EAAEd;EAAoB,GAAKM,IAAI;IAAEG,OAAO,EAAEA;EAAQ,IAC7DH,IAAI,CAACG,OAAO,KAAK,SAAS,IAAIH,IAAI,CAACS,GAAG,IAAI,CAACT,IAAI,CAACI,OAAO,~~iBACtDtB~~,KAAA,~~CAAAuB~~,aAAA,CAACK,SAAS,EAAAH,QAAA,KACHP,IAAI,CAACS,GAAG,GACT;IAAEA,GAAG,EAAE,OAAOT,IAAI,CAACS,GAAG,KAAK,QAAQ,GAAGT,IAAI,CAACS,GAAG,GAAGT,IAAI,CAACS,GAAG,CAAC,CAAC;EAAE,CAAC,GAC9D,CAAC,CAAC,EACDT,IAAI,CAACS,GAAG,IAAI,OAAOT,IAAI,CAACS,GAAG,KAAK,QAAQ,IAAIT,IAAI,CAACS,GAAG,CAAC,CAAC,CAAC,GACxD;IAAEE,MAAM,KAAAC,MAAA,CAAKZ,IAAI,CAACS,GAAG,CAAC,CAAC,CAAC,WAAAG,MAAA,CAAQZ,IAAI,CAACS,GAAG,CAAC,CAAC,CAAC;EAAM,CAAC,GAClD,CAAC,CAAC;IACN;IACAI,GAAG,EAAC;EAAE,GAET,EAEAhB,IAAI,IAAIE,YAAY,KAAK,MAAM,~~iBAC9BjB~~,KAAA,~~CAAAuB~~,aAAA,CAACR,IAAI;IAACiB,IAAI,EAAC,cAAc;IAACC,EAAE,EAAE,CAAC,GAAI;IAACC,EAAE,EAAE;EAAI,EAC7C,~~eAEDlC~~,KAAA,~~CAAAuB~~,aAAA,~~CAAChB~~,IAAI;~~IACHc~~,OAAO,EAAEH,IAAI,CAACG,OAAO,KAAK,QAAQ,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,IAAK;IACjEc,gBAAgB;EAAA,~~gBAEhBnC~~,KAAA,~~CAAAuB~~,aAAA,eAAOT,QAAQ,CAAQ,EAEtBI,IAAI,CAACG,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAIH,IAAI,~~iBAC3ClB~~,KAAA,~~CAAAuB~~,aAAA,~~CAAAvB~~,KAAA,~~CAAAoC~~,QAAA,QACG,GAAG,~~eACJpC~~,KAAA,~~CAAAuB~~,aAAA,~~CAACjB~~,GAAG,~~QAAEY~~,IAAI,CAACmB,KAAK,CAAO,CAE1B,CACI,EAENtB,IAAI,IAAIE,YAAY,KAAK,OAAO,iBAC/~~BjB~~,KAAA,~~CAAAuB~~,aAAA,CAACR,IAAI;IAACiB,IAAI,EAAC,cAAc;IAACC,EAAE,EAAE,GAAI;IAACC,EAAE,EAAE,CAAC;EAAI,EAC7C,EAEA,CAAEhB,IAAI,CAACG,OAAO,KAAK,MAAM,IAAIH,IAAI,CAACoB,QAAQ,IACxCpB,IAAI,CAACG,OAAO,KAAK,QAAQ,IAAIH,IAAI,CAACoB,QAAS,IAC3CpB,IAAI,CAACG,OAAO,KAAK,SAAS,IAAIH,IAAI,CAACoB,QAAS,~~kBAC7CtC~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,SAAS;~~IAAC4B~~,IAAI,EAAC,cAAc;IAACC,EAAE,EAAE,GAAI;IAACM,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAC/D,CACS;AAEhB,CAAC,CAAC;AAEF9B,IAAI,CAAC+B,WAAW,GAAG,MAAM;AAEzB/B,IAAI,CAACgC,YAAY,GAAG;EAClBrB,OAAO,EAAE;AACX,CAAC;AAED,IAAMG,SAAS,~~GAAGtB~~,MAAM,CAACG,SAAS,CAAC,~~CAAAsC~~,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,~~iQAOb7C~~,QAAQ,CAAC,eAAe,CAAC,EAI3C,~~UAAC8C~~,KAAK,EAAK;EAAA,IAAAC,cAAA;EACX,IAAMC,MAAM,~~GAAGvC~~,aAAa,~~EAAAsC~~,cAAA,GAACD,KAAK,CAACxB,OAAO,cAAAyB,cAAA,cAAAA,cAAA,GAAI,QAAQ,CAAC;EAEvD,~~OAAO3C~~,GAAG,~~qIACN4C~~,MAAM,CAACC,OAAO,EACdH,KAAK,CAACI,KAAK,IAAIF,MAAM,CAACE,KAAK,EAC3BJ,KAAK,CAACK,KAAK,IAAIH,MAAM,CAACG,KAAK,EAC3BL,KAAK,CAACP,QAAQ,IAAIS,MAAM,CAACT,QAAQ,EACjCO,KAAK,CAACM,MAAM,IAAIJ,MAAM,CAACI,MAAM,EAC7BN,KAAK,CAACO,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EAG/BL,MAAM,CAACG,KAAK,EAKZH,MAAM,CAACE,KAAK,EACZJ,KAAK,CAACP,QAAQ,IAAIS,MAAM,CAACT,QAAQ,EAIjCS,MAAM,CAACI,MAAM,EACbN,KAAK,CAACP,QAAQ,IAAIS,MAAM,CAACT,QAAQ,EAKjCS,MAAM,CAACK,QAAQ;AAGvB,CAAC,CACF;AAED,IAAMxB,SAAS,~~GAAG1B~~,MAAM,~~CAACmD~~,GAAG,CAAAV,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,~~0HAKV7C~~,QAAQ,CAAC,SAAS,CAAC,EACfA,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,SAAS,CAAC,CACpC"}
1	+ {"version":3,"file":"Pill.js","names":["themeGet","React","forwardRef","styled","css","CloseIcon","Clickable","ClickableProps","Sup","Text","PILL_VARIANTS","BoxProps","ResponsiveValue","PILL_VARIANT_NAMES","Pill","_ref","forwardedRef","_rest$variant","children","Icon","_ref$iconPosition","iconPosition","rest","_objectWithoutProperties","_excluded","variant","compact","createElement","Container","_extends","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","overflowEllipsis","Fragment","count","selected","width","height","displayName","defaultProps","withConfig","componentId","props","_props$variant","states","default","focus","hover","active","disabled","img"],"sources":["../../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n \"badge\",\n \"dotted\",\n \"default\",\n \"filter\",\n \"gray\",\n \"profile\",\n \"search\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n \| \"active\"\n \| \"default\"\n \| \"disabled\"\n \| \"focus\"\n \| \"hover\"\n \| \"selected\"\n\n/** PillProps /\nexport type PillProps = ClickableProps & {\n as?:\n \| keyof JSX.IntrinsicElements\n \| React.ComponentType<React.PropsWithChildren<unknown>>\n /* Forces focus state /\n focus?: boolean\n /* Forces hover state /\n hover?: boolean\n /* Forces active state. This is for working with :active; not denoting a selected state /\n active?: boolean\n /* Forces selected state. Use this state to denote the selected state /\n selected?: boolean\n /* Optional icon slot /\n Icon?: React.FunctionComponent<\n React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n >\n /* Optional: Icon positioning /\n iconPosition?: \"left\" \| \"right\"\n} & (\n \| {\n variant?: Extract<\n PillVariant,\n \"badge\" \| \"default\" \| \"dotted\" \| \"filter\" \| \"gray\" \| \"search\"\n >\n }\n \| {\n /* `\"profile\"` pills have an optional `src` /\n variant?: Extract<PillVariant, \"profile\">\n /\n Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n /\n src?: string \| [string, string]\n /* Optionally switch into a condensed form /\n compact?: boolean\n }\n \| {\n /* `search` pills have an optional `count` /\n variant?: Extract<PillVariant, \"search\">\n /* Optional count /\n count?: number\n }\n )\n\n/\n A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n HTMLAnchorElement & HTMLButtonElement,\n PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n const variant =\n rest.variant === \"profile\" && rest.compact\n ? \"gray\"\n : rest.variant ?? \"default\"\n\n return (\n <Container ref={forwardedRef as any} {...rest} variant={variant}>\n {rest.variant === \"profile\" && rest.src && !rest.compact && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n {Icon && iconPosition === \"left\" && (\n <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n )}\n\n <Text\n variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n overflowEllipsis\n >\n <span>{children}</span>\n\n {rest.variant === \"search\" && \"count\" in rest && (\n <>\n {\" \"}\n <Sup>{rest.count}</Sup>\n </>\n )}\n </Text>\n\n {Icon && iconPosition === \"right\" && (\n <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n )}\n\n {((rest.variant === \"gray\" && rest.selected) \|\|\n (rest.variant === \"filter\" && rest.selected) \|\|\n (rest.variant === \"profile\" && rest.selected)) && (\n <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n )}\n </Container>\n )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n border: 1px solid ${themeGet(\"colors.mono15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n return css`\n ${states.default}\n ${props.focus && states.focus}\n ${props.hover && states.hover}\n ${props.selected && states.selected}\n ${props.active && states.active}\n ${props.disabled && states.disabled}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${props.selected && states.selected}\n }\n\n &:active {\n ${states.active}\n ${props.selected && states.selected}\n }\n\n &:disabled {\n pointer-events: none;\n ${states.disabled}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.mono30\")};\n margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}

package/dist/esm/elements/Pill/Pill.story.js CHANGED Viewed

@@ -8,7 +8,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState } from "react";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
-import { Pill, PILL_VARIANT_NAMES } from "./Pill";
+import { Pill, PillVariant, PILL_VARIANT_NAMES } from "./Pill";
 import { Box } from "../Box";
 import { Join } from "../Join";
 import GraphIcon from "@artsy/icons/GraphIcon";

package/dist/esm/elements/Pill/Pill.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.story.js","names":["React","useState","Flex","Spacer","Pill","PILL_VARIANT_NAMES","Box","Join","GraphIcon","ChevronSmallDownIcon","styled","Popover","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Display","withConfig","displayName","componentId","Default","args","children","story","Variants","render","createElement","display","flexDirection","gap","map","variant","_extends","key","p","overflowX","includes","bg","color","separator","x","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","flexWrap","count","ArtistWithImage","src","PillWithIcon","Icon","iconPosition","Interactive","_useState","_useState2","_slicedToArray","setSelected","onClick","prevActive","ProfileVariant","compact","PillWithPopover","placement","popover","Fragment","_ref","anchorRef","onVisible","ref"],"sources":["../../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n component: Pill,\n title: \"Components/Pill\",\n tags: [\"autodocs\"],\n parameters: {\n docs: {\n description: {\n component:\n \"A pill-shaped button component with various visual variants for different use cases.\",\n },\n },\n controls: {\n exclude: STORYBOOK_PROPS_BLOCKLIST,\n },\n },\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Default = {\n args: {\n children: \"Default Pill\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Basic pill component with default styling.\",\n },\n },\n },\n}\n\nexport const Variants = {\n render: () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n {PILL_VARIANT_NAMES.map((variant) => (\n <Display\n key={variant}\n p={1}\n overflowX=\"auto\"\n {...([\"primaryWhite\", \"secondaryWhite\"].includes(variant)\n ? { bg: \"mono100\", color: \"mono0\" }\n : { bg: \"mono0\", color: \"mono100\" })}\n >\n <Flex>\n <Join separator={<Spacer x={2} />}>\n <Pill variant={variant as PillVariant}>Default</Pill>\n <Pill variant={variant as PillVariant} focus>\n Focus\n </Pill>\n <Pill variant={variant as PillVariant} hover>\n Hover\n </Pill>\n <Pill variant={variant as PillVariant} active>\n Active\n </Pill>\n <Pill variant={variant as PillVariant} selected>\n Selected\n </Pill>\n <Pill variant={variant as PillVariant} disabled>\n Disabled\n </Pill>\n </Join>\n </Flex>\n </Display>\n ))}\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"All available pill variants with different interaction states.\",\n },\n },\n },\n}\n\nexport const LinkExample = {\n render: () => (\n <Pill\n variant=\"profile\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill rendered as a clickable link element.\",\n },\n },\n },\n}\n\nexport const LongExampleWithTruncation = {\n render: () => (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill with long text that gets truncated with ellipsis.\",\n },\n },\n },\n}\n\nexport const SearchWithCount = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"search\" count={123}>\n Default\n </Pill>\n <Pill variant=\"search\" count={123} focus>\n Focus\n </Pill>\n <Pill variant=\"search\" count={123} hover>\n Hover\n </Pill>\n <Pill variant=\"search\" count={123} active>\n Active\n </Pill>\n <Pill variant=\"search\" count={123} selected>\n Selected\n </Pill>\n <Pill variant=\"search\" count={123} disabled>\n Disabled\n </Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Search variant pill with count indicator in different states.\",\n },\n },\n },\n}\n\nexport const ArtistWithImage = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n >\n Default\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n focus\n >\n Focus\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n hover\n >\n Hover\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n selected\n >\n Selected\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n disabled\n >\n Disabled\n </Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Profile variant pill with artist image in different states.\",\n },\n },\n },\n}\n\nexport const PillWithIcon = {\n render: () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"badge\" Icon={GraphIcon}>\n Badge with Icon\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} focus>\n Focus\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} hover>\n Hover\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} selected>\n Selected\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} disabled>\n Disabled\n </Pill>\n </Box>\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill\n variant=\"default\"\n Icon={ChevronSmallDownIcon}\n iconPosition=\"right\"\n >\n With Right Icon\n </Pill>\n <Pill variant=\"search\" Icon={GraphIcon}>\n Search with Icon\n </Pill>\n <Pill variant=\"filter\" Icon={GraphIcon}>\n Filter with Icon\n </Pill>\n <Pill variant=\"dotted\" Icon={GraphIcon}>\n Dotted with Icon\n </Pill>\n </Box>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pills with various icons and icon positions.\",\n },\n },\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [selected, setSelected] = useState(false)\n return (\n <Pill\n selected={selected}\n onClick={() => setSelected((prevActive) => !prevActive)}\n >\n Click to Toggle\n </Pill>\n )\n },\n parameters: {\n docs: {\n description: {\n story: \"Interactive pill that toggles selected state when clicked.\",\n },\n },\n },\n}\n\nexport const ProfileVariant = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"profile\" src=\"https://picsum.photos/seed/isa/60/60\">\n Standard Profile\n </Pill>\n <Pill\n variant=\"profile\"\n compact\n src=\"https://picsum.photos/seed/isa/60/60\"\n >\n Compact Profile\n </Pill>\n <Pill variant=\"profile\">Profile without Image</Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Profile variant pills with different configurations.\",\n },\n },\n },\n}\n\nexport const PillWithPopover = {\n render: () => (\n <Popover placement=\"bottom\" popover={<>Popover Content</>}>\n {({ anchorRef, onVisible }) => (\n <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n Click for Popover\n </Pill>\n )}\n </Popover>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill that triggers a popover when clicked.\",\n },\n },\n },\n}\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,IAAI,EAAeC,kBAAkB;AAC9C,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,oBAAoB,MAAM,mCAAmC;AACpE,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO;AAChB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAET,IAAI;EACfU,KAAK,EAAE,iBAAiB;EACxBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,IAAMS,OAAO,GAAGX,MAAM,CAACJ,GAAG,CAAC,CAAAgB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAC7BH,OAAO,CAACE,WAAW,GAAG,MAAM;AAE5B,OAAO,IAAME,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDX,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,QAAQ,GAAG;EACtBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/C7B,kBAAkB,CAAC8B,GAAG,CAAC,UAACC,OAAO;MAAA,oBAC9BpC,KAAA,CAAA+B,aAAA,CAACV,OAAO,EAAAgB,QAAA;QACNC,GAAG,EAAEF,OAAQ;QACbG,CAAC,EAAE,CAAE;QACLC,SAAS,EAAC;MAAM,GACX,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAACC,QAAQ,CAACL,OAAO,CAAC,GACrD;QAAEM,EAAE,EAAE,SAAS;QAAEC,KAAK,EAAE;MAAQ,CAAC,GACjC;QAAED,EAAE,EAAE,OAAO;QAAEC,KAAK,EAAE;MAAU,CAAC,gBAErC3C,KAAA,CAAA+B,aAAA,CAAC7B,IAAI,qBACHF,KAAA,CAAA+B,aAAA,CAACxB,IAAI;QAACqC,SAAS,eAAE5C,KAAA,CAAA+B,aAAA,CAAC5B,MAAM;UAAC0C,CAAC,EAAE;QAAE;MAAI,gBAChC7C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA;MAAuB,GAAC,SAAO,CAAO,eACrDpC,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA,OAAuB;QAACU,KAAK;MAAA,GAAC,OAE7C,CAAO,eACP9C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA,OAAuB;QAACW,KAAK;MAAA,GAAC,OAE7C,CAAO,eACP/C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA,OAAuB;QAACY,MAAM;MAAA,GAAC,QAE9C,CAAO,eACPhD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA,OAAuB;QAACa,QAAQ;MAAA,GAAC,UAEhD,CAAO,eACPjD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAACgC,OAAO,EAAEA,OAAuB;QAACc,QAAQ;MAAA,GAAC,UAEhD,CAAO,CACF,CACF,CACC;IAAA,CACX,CAAC,CACE;EAAA,CACP;EACDlC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMuB,WAAW,GAAG;EACzBrB,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBgB,EAAE,EAAC;MACH;MACA;MAAA;MACAC,IAAI,EAAC;IAAU,GAChB,aAED,CAAO;EAAA,CACR;EACDrC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAM0B,yBAAyB,GAAG;EACvCxB,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACmD,QAAQ,EAAE;IAAI,GAAC,2DAErB,CAAO;EAAA,CACR;EACDvC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAM4B,eAAe,GAAG;EAC7B1B,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACE,GAAG,EAAE,CAAE;MAACuB,QAAQ,EAAC;IAAM,gBACzCzD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE;IAAI,GAAC,SAEnC,CAAO,eACP1D,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE,GAAI;MAACZ,KAAK;IAAA,GAAC,OAEzC,CAAO,eACP9C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE,GAAI;MAACX,KAAK;IAAA,GAAC,OAEzC,CAAO,eACP/C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE,GAAI;MAACV,MAAM;IAAA,GAAC,QAE1C,CAAO,eACPhD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE,GAAI;MAACT,QAAQ;IAAA,GAAC,UAE5C,CAAO,eACPjD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAACsB,KAAK,EAAE,GAAI;MAACR,QAAQ;IAAA,GAAC,UAE5C,CAAO,CACH;EAAA,CACP;EACDlC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAM+B,eAAe,GAAG;EAC7B7B,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACE,GAAG,EAAE,CAAE;MAACuB,QAAQ,EAAC;IAAM,gBACzCzD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBwB,GAAG,EAAE,CACH,sCAAsC,EACtC,sCAAsC;IACtC,GACH,SAED,CAAO,eACP5D,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBwB,GAAG,EAAE,CACH,sCAAsC,EACtC,sCAAsC,CACtC;MACFd,KAAK;IAAA,GACN,OAED,CAAO,eACP9C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBwB,GAAG,EAAE,CACH,sCAAsC,EACtC,sCAAsC,CACtC;MACFb,KAAK;IAAA,GACN,OAED,CAAO,eACP/C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBwB,GAAG,EAAE,CACH,sCAAsC,EACtC,sCAAsC,CACtC;MACFX,QAAQ;IAAA,GACT,UAED,CAAO,eACPjD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBwB,GAAG,EAAE,CACH,sCAAsC,EACtC,sCAAsC,CACtC;MACFV,QAAQ;IAAA,GACT,UAED,CAAO,CACH;EAAA,CACP;EACDlC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMiC,YAAY,GAAG;EAC1B/B,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,gBAChDlC,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACE,GAAG,EAAE,CAAE;MAACuB,QAAQ,EAAC;IAAM,gBACzCzD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,OAAO;MAAC0B,IAAI,EAAEtD;IAAU,GAAC,iBAEvC,CAAO,eACPR,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,OAAO;MAAC0B,IAAI,EAAEtD,SAAU;MAACsC,KAAK;IAAA,GAAC,OAE7C,CAAO,eACP9C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,OAAO;MAAC0B,IAAI,EAAEtD,SAAU;MAACuC,KAAK;IAAA,GAAC,OAE7C,CAAO,eACP/C,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,OAAO;MAAC0B,IAAI,EAAEtD,SAAU;MAACyC,QAAQ;IAAA,GAAC,UAEhD,CAAO,eACPjD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,OAAO;MAAC0B,IAAI,EAAEtD,SAAU;MAAC0C,QAAQ;IAAA,GAAC,UAEhD,CAAO,CACH,eACNlD,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACE,GAAG,EAAE,CAAE;MAACuB,QAAQ,EAAC;IAAM,gBACzCzD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjB0B,IAAI,EAAErD,oBAAqB;MAC3BsD,YAAY,EAAC;IAAO,GACrB,iBAED,CAAO,eACP/D,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAAC0B,IAAI,EAAEtD;IAAU,GAAC,kBAExC,CAAO,eACPR,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAAC0B,IAAI,EAAEtD;IAAU,GAAC,kBAExC,CAAO,eACPR,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,QAAQ;MAAC0B,IAAI,EAAEtD;IAAU,GAAC,kBAExC,CAAO,CACH,CACF;EAAA,CACP;EACDQ,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMoC,WAAW,GAAG;EACzBlC,MAAM,EAAE,SAARA,MAAMA,CAAA,EAAQ;IACZ,IAAAmC,SAAA,GAAgChE,QAAQ,CAAC,KAAK,CAAC;MAAAiE,UAAA,GAAAC,cAAA,CAAAF,SAAA;MAAxChB,QAAQ,GAAAiB,UAAA;MAAEE,WAAW,GAAAF,UAAA;IAC5B,oBACElE,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACH6C,QAAQ,EAAEA,QAAS;MACnBoB,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQD,WAAW,CAAC,UAACE,UAAU;UAAA,OAAK,CAACA,UAAU;QAAA,EAAC;MAAA;IAAC,GACzD,iBAED,CAAO;EAEX,CAAC;EACDtD,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAM2C,cAAc,GAAG;EAC5BzC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACzB,GAAG;MAAC0B,OAAO,EAAC,MAAM;MAACE,GAAG,EAAE,CAAE;MAACuB,QAAQ,EAAC;IAAM,gBACzCzD,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC,SAAS;MAACwB,GAAG,EAAC;IAAsC,GAAC,kBAEnE,CAAO,eACP5D,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MACHgC,OAAO,EAAC,SAAS;MACjBoC,OAAO;MACPZ,GAAG,EAAC;IAAsC,GAC3C,iBAED,CAAO,eACP5D,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;MAACgC,OAAO,EAAC;IAAS,GAAC,uBAAqB,CAAO,CAChD;EAAA,CACP;EACDpB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAM6C,eAAe,GAAG;EAC7B3C,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ9B,KAAA,CAAA+B,aAAA,CAACpB,OAAO;MAAC+D,SAAS,EAAC,QAAQ;MAACC,OAAO,eAAE3E,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAA4E,QAAA,QAAE,iBAAe;IAAI,GACvD,UAAAC,IAAA;MAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;QAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;MAAA,oBACtB/E,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;QAAC4E,GAAG,EAAEF,SAAiB;QAACT,OAAO,EAAE,SAATA,OAAOA,CAAA;UAAA,OAAQU,SAAS,EAAE;QAAA;MAAC,GAAC,mBAEzD,CAAO;IAAA,CACR,CACO;EAAA,CACX;EACD/D,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}
1	+ {"version":3,"file":"Pill.story.js","names":["React","useState","Flex","Spacer","Pill","PillVariant","PILL_VARIANT_NAMES","Box","Join","GraphIcon","ChevronSmallDownIcon","styled","Popover","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Display","withConfig","displayName","componentId","Default","args","children","story","Variants","render","createElement","display","flexDirection","gap","map","variant","_extends","key","p","overflowX","includes","bg","color","separator","x","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","flexWrap","count","ArtistWithImage","src","PillWithIcon","Icon","iconPosition","Interactive","_useState","_useState2","_slicedToArray","setSelected","onClick","prevActive","ProfileVariant","compact","PillWithPopover","placement","popover","Fragment","_ref","anchorRef","onVisible","ref"],"sources":["../../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n component: Pill,\n title: \"Components/Pill\",\n tags: [\"autodocs\"],\n parameters: {\n docs: {\n description: {\n component:\n \"A pill-shaped button component with various visual variants for different use cases.\",\n },\n },\n controls: {\n exclude: STORYBOOK_PROPS_BLOCKLIST,\n },\n },\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Default = {\n args: {\n children: \"Default Pill\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Basic pill component with default styling.\",\n },\n },\n },\n}\n\nexport const Variants = {\n render: () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n {PILL_VARIANT_NAMES.map((variant) => (\n <Display\n key={variant}\n p={1}\n overflowX=\"auto\"\n {...([\"primaryWhite\", \"secondaryWhite\"].includes(variant)\n ? { bg: \"mono100\", color: \"mono0\" }\n : { bg: \"mono0\", color: \"mono100\" })}\n >\n <Flex>\n <Join separator={<Spacer x={2} />}>\n <Pill variant={variant as PillVariant}>Default</Pill>\n <Pill variant={variant as PillVariant} focus>\n Focus\n </Pill>\n <Pill variant={variant as PillVariant} hover>\n Hover\n </Pill>\n <Pill variant={variant as PillVariant} active>\n Active\n </Pill>\n <Pill variant={variant as PillVariant} selected>\n Selected\n </Pill>\n <Pill variant={variant as PillVariant} disabled>\n Disabled\n </Pill>\n </Join>\n </Flex>\n </Display>\n ))}\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"All available pill variants with different interaction states.\",\n },\n },\n },\n}\n\nexport const LinkExample = {\n render: () => (\n <Pill\n variant=\"profile\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill rendered as a clickable link element.\",\n },\n },\n },\n}\n\nexport const LongExampleWithTruncation = {\n render: () => (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill with long text that gets truncated with ellipsis.\",\n },\n },\n },\n}\n\nexport const SearchWithCount = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"search\" count={123}>\n Default\n </Pill>\n <Pill variant=\"search\" count={123} focus>\n Focus\n </Pill>\n <Pill variant=\"search\" count={123} hover>\n Hover\n </Pill>\n <Pill variant=\"search\" count={123} active>\n Active\n </Pill>\n <Pill variant=\"search\" count={123} selected>\n Selected\n </Pill>\n <Pill variant=\"search\" count={123} disabled>\n Disabled\n </Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Search variant pill with count indicator in different states.\",\n },\n },\n },\n}\n\nexport const ArtistWithImage = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n >\n Default\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n focus\n >\n Focus\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n hover\n >\n Hover\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n selected\n >\n Selected\n </Pill>\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n disabled\n >\n Disabled\n </Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Profile variant pill with artist image in different states.\",\n },\n },\n },\n}\n\nexport const PillWithIcon = {\n render: () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"badge\" Icon={GraphIcon}>\n Badge with Icon\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} focus>\n Focus\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} hover>\n Hover\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} selected>\n Selected\n </Pill>\n <Pill variant=\"badge\" Icon={GraphIcon} disabled>\n Disabled\n </Pill>\n </Box>\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill\n variant=\"default\"\n Icon={ChevronSmallDownIcon}\n iconPosition=\"right\"\n >\n With Right Icon\n </Pill>\n <Pill variant=\"search\" Icon={GraphIcon}>\n Search with Icon\n </Pill>\n <Pill variant=\"filter\" Icon={GraphIcon}>\n Filter with Icon\n </Pill>\n <Pill variant=\"dotted\" Icon={GraphIcon}>\n Dotted with Icon\n </Pill>\n </Box>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pills with various icons and icon positions.\",\n },\n },\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [selected, setSelected] = useState(false)\n return (\n <Pill\n selected={selected}\n onClick={() => setSelected((prevActive) => !prevActive)}\n >\n Click to Toggle\n </Pill>\n )\n },\n parameters: {\n docs: {\n description: {\n story: \"Interactive pill that toggles selected state when clicked.\",\n },\n },\n },\n}\n\nexport const ProfileVariant = {\n render: () => (\n <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n <Pill variant=\"profile\" src=\"https://picsum.photos/seed/isa/60/60\">\n Standard Profile\n </Pill>\n <Pill\n variant=\"profile\"\n compact\n src=\"https://picsum.photos/seed/isa/60/60\"\n >\n Compact Profile\n </Pill>\n <Pill variant=\"profile\">Profile without Image</Pill>\n </Box>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Profile variant pills with different configurations.\",\n },\n },\n },\n}\n\nexport const PillWithPopover = {\n render: () => (\n <Popover placement=\"bottom\" popover={<>Popover Content</>}>\n {({ anchorRef, onVisible }) => (\n <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n Click for Popover\n </Pill>\n )}\n </Popover>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Pill that triggers a popover when clicked.\",\n },\n },\n },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Pill/tokens.js CHANGED Viewed

@@ -5,8 +5,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { themeGet } from "@styled-system/theme-get";
-import { css } from "styled-components";
+import { css, Interpolation } from "styled-components";
 import { Sup } from "../Sup";
+import { PillState, PillVariant } from "./Pill";
 var DEFAULT_STATES = {
   default: css(["border-radius:15px;height:30px;padding:0 ", ";"], themeGet("space.2")),
   focus: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),

package/dist/esm/elements/Pill/tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tokens.js","names":["themeGet","css","Sup","DEFAULT_STATES","default","focus","hover","active","selected","disabled","PILL_VARIANTS","dotted","_objectSpread","search","filter","badge","profile","gray"],"sources":["../../../../src/elements/Pill/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, Interpolation } from \"styled-components\"\nimport { Sup } from \"../Sup\"\nimport { PillState, PillVariant } from \"./Pill\"\n\nconst DEFAULT_STATES = {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 ${themeGet(\"space.2\")};\n `,\n focus: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n hover: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n border-color: ${themeGet(\"colors.blue150\")};\n background-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n background-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n text-decoration: none;\n `,\n}\n\nexport const PILL_VARIANTS: Record<\n PillVariant,\n Record<PillState, Interpolation<any>[]>\n> = {\n dotted: {\n ...DEFAULT_STATES,\n default: css`\n ${DEFAULT_STATES.default}\n border-style: dashed;\n `,\n },\n\n default: DEFAULT_STATES,\n\n search: {\n ...DEFAULT_STATES,\n default: css`\n ${DEFAULT_STATES.default}\n\n ${Sup} {\n color: ${themeGet(\"colors.blue100\")};\n transition: color 0.25s ease;\n display: none;\n }\n\n @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n height: 40px;\n border-radius: 20px;\n\n ${Sup} {\n display: inline;\n }\n }\n `,\n focus: css`\n ${DEFAULT_STATES.focus}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n `,\n hover: css`\n ${DEFAULT_STATES.hover}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n\n ${Sup} {\n color: ${themeGet(\"colors.blue100\")};\n }\n `,\n active: css`\n ${DEFAULT_STATES.active}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n\n ${Sup} {\n color: ${themeGet(\"colors.mono0\")};\n }\n `,\n selected: css`\n ${DEFAULT_STATES.selected}\n\n ${Sup} {\n color: ${themeGet(\"colors.mono0\")};\n }\n `,\n disabled: css`\n ${DEFAULT_STATES.disabled}\n\n ${Sup} {\n color: ${themeGet(\"colors.mono60\")};\n }\n `,\n },\n\n filter: {\n default: css`\n height: 30px;\n padding: 0 ${themeGet(\"space.1\")};\n `,\n focus: css`\n text-decoration: underline;\n `,\n hover: css`\n color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n text-decoration: underline;\n `,\n selected: css`\n /* Same as default state */\n `,\n disabled: css`\n border-color: ${themeGet(\"colors.mono60\")};\n `,\n },\n\n badge: {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 15px;\n background-color: ${themeGet(\"colors.blue10\")};\n border-color: ${themeGet(\"colors.blue10\")};\n color: ${themeGet(\"colors.blue100\")};\n `,\n hover: css`\n background-color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n focus: css`\n background-color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n active: css`\n background-color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n selected: css`\n background-color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.blue10\")};\n border-color: ${themeGet(\"colors.blue10\")};\n color: ${themeGet(\"colors.blue100\")};\n `,\n },\n\n profile: {\n ...DEFAULT_STATES,\n default: css`\n border-radius: 25px;\n height: 50px;\n padding: 0 ${themeGet(\"space.2\")} 0 ${themeGet(\"space.2\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n active: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n `,\n },\n\n gray: {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 15px;\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n `,\n hover: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n focus: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n `,\n },\n}\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAuB,mBAAmB;AACtD,SAASC,GAAG;AAGZ,IAAMC,cAAc,GAAG;EACrBC,OAAO,EAAEH,GAAG,qDAGGD,QAAQ,CAAC,SAAS,CAAC,CACjC;EACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;EACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;EACDO,MAAM,EAAEN,GAAG,oFACOD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,CAElC;EACDQ,QAAQ,EAAEP,GAAG,0DACKD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,CAClC;EACDS,QAAQ,EAAER,GAAG,+EACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;AAGtC,CAAC;AAED,OAAO,IAAMU,aAGZ,GAAG;EACFC,MAAM,EAAAC,aAAA,CAAAA,aAAA,KACDT,cAAc;IACjBC,OAAO,EAAEH,GAAG,gCACRE,cAAc,CAACC,OAAO;EAEzB,EACF;EAEDA,OAAO,EAAED,cAAc;EAEvBU,MAAM,EAAAD,aAAA,CAAAA,aAAA,KACDT,cAAc;IACjBC,OAAO,EAAEH,GAAG,mJACRE,cAAc,CAACC,OAAO,EAEtBF,GAAG,EACMF,QAAQ,CAAC,gBAAgB,CAAC,EAKhBA,QAAQ,CAAC,eAAe,CAAC,EAI1CE,GAAG,CAIR;IACDG,KAAK,EAAEJ,GAAG,iEACNE,cAAc,CAACE,KAAK,CAMvB;IACDC,KAAK,EAAEL,GAAG,kFACNE,cAAc,CAACG,KAAK,EAOpBJ,GAAG,EACMF,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;IACDO,MAAM,EAAEN,GAAG,kFACPE,cAAc,CAACI,MAAM,EAOrBL,GAAG,EACMF,QAAQ,CAAC,cAAc,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,6BACTE,cAAc,CAACK,QAAQ,EAEvBN,GAAG,EACMF,QAAQ,CAAC,cAAc,CAAC,CAEpC;IACDS,QAAQ,EAAER,GAAG,6BACTE,cAAc,CAACM,QAAQ,EAEvBP,GAAG,EACMF,QAAQ,CAAC,eAAe,CAAC;EAErC,EACF;EAEDc,MAAM,EAAE;IACNV,OAAO,EAAEH,GAAG,kCAEGD,QAAQ,CAAC,SAAS,CAAC,CACjC;IACDK,KAAK,EAAEJ,GAAG,gCAET;IACDK,KAAK,EAAEL,GAAG,8DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,CAE3C;IACDO,MAAM,EAAEN,GAAG,8DACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,CAE3C;IACDQ,QAAQ,EAAEP,GAAG,MAEZ;IACDQ,QAAQ,EAAER,GAAG,yBACKD,QAAQ,CAAC,eAAe,CAAC;EAE7C,CAAC;EAEDe,KAAK,EAAE;IACLX,OAAO,EAAEH,GAAG,wGAIUD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,gBAAgB,CAAC,CACpC;IACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDQ,QAAQ,EAAEP,GAAG,oFACSD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,gBAAgB,CAAC;EAEvC,CAAC;EAEDgB,OAAO,EAAAJ,aAAA,CAAAA,aAAA,KACFT,cAAc;IACjBC,OAAO,EAAEH,GAAG,oGAGGD,QAAQ,CAAC,SAAS,CAAC,EAAMA,QAAQ,CAAC,SAAS,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,4EACKD,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,gBAAgB,CAAC,EACfA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;EACnC,EACF;EAEDiB,IAAI,EAAE;IACJb,OAAO,EAAEH,GAAG,wGAIUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CACpC;IACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,4EACKD,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,gBAAgB,CAAC,EACfA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;EAEtC;AACF,CAAC"}
1	+ {"version":3,"file":"tokens.js","names":["themeGet","css","Interpolation","Sup","PillState","PillVariant","DEFAULT_STATES","default","focus","hover","active","selected","disabled","PILL_VARIANTS","dotted","_objectSpread","search","filter","badge","profile","gray"],"sources":["../../../../src/elements/Pill/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, Interpolation } from \"styled-components\"\nimport { Sup } from \"../Sup\"\nimport { PillState, PillVariant } from \"./Pill\"\n\nconst DEFAULT_STATES = {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 ${themeGet(\"space.2\")};\n `,\n focus: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n hover: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n border-color: ${themeGet(\"colors.blue150\")};\n background-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n background-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n text-decoration: none;\n `,\n}\n\nexport const PILL_VARIANTS: Record<\n PillVariant,\n Record<PillState, Interpolation<any>[]>\n> = {\n dotted: {\n ...DEFAULT_STATES,\n default: css`\n ${DEFAULT_STATES.default}\n border-style: dashed;\n `,\n },\n\n default: DEFAULT_STATES,\n\n search: {\n ...DEFAULT_STATES,\n default: css`\n ${DEFAULT_STATES.default}\n\n ${Sup} {\n color: ${themeGet(\"colors.blue100\")};\n transition: color 0.25s ease;\n display: none;\n }\n\n @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n height: 40px;\n border-radius: 20px;\n\n ${Sup} {\n display: inline;\n }\n }\n `,\n focus: css`\n ${DEFAULT_STATES.focus}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n `,\n hover: css`\n ${DEFAULT_STATES.hover}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n\n ${Sup} {\n color: ${themeGet(\"colors.blue100\")};\n }\n `,\n active: css`\n ${DEFAULT_STATES.active}\n text-decoration: none;\n\n span {\n text-decoration: underline;\n }\n\n ${Sup} {\n color: ${themeGet(\"colors.mono0\")};\n }\n `,\n selected: css`\n ${DEFAULT_STATES.selected}\n\n ${Sup} {\n color: ${themeGet(\"colors.mono0\")};\n }\n `,\n disabled: css`\n ${DEFAULT_STATES.disabled}\n\n ${Sup} {\n color: ${themeGet(\"colors.mono60\")};\n }\n `,\n },\n\n filter: {\n default: css`\n height: 30px;\n padding: 0 ${themeGet(\"space.1\")};\n `,\n focus: css`\n text-decoration: underline;\n `,\n hover: css`\n color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n text-decoration: underline;\n `,\n selected: css`\n /* Same as default state */\n `,\n disabled: css`\n border-color: ${themeGet(\"colors.mono60\")};\n `,\n },\n\n badge: {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 15px;\n background-color: ${themeGet(\"colors.blue10\")};\n border-color: ${themeGet(\"colors.blue10\")};\n color: ${themeGet(\"colors.blue100\")};\n `,\n hover: css`\n background-color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n focus: css`\n background-color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n active: css`\n background-color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n selected: css`\n background-color: ${themeGet(\"colors.blue150\")};\n border-color: ${themeGet(\"colors.blue150\")};\n color: ${themeGet(\"colors.mono0\")};\n text-decoration: underline;\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.blue10\")};\n border-color: ${themeGet(\"colors.blue10\")};\n color: ${themeGet(\"colors.blue100\")};\n `,\n },\n\n profile: {\n ...DEFAULT_STATES,\n default: css`\n border-radius: 25px;\n height: 50px;\n padding: 0 ${themeGet(\"space.2\")} 0 ${themeGet(\"space.2\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n active: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n `,\n },\n\n gray: {\n default: css`\n border-radius: 15px;\n height: 30px;\n padding: 0 15px;\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n `,\n hover: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n focus: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n `,\n active: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono100\")};\n text-decoration: underline;\n `,\n selected: css`\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n `,\n disabled: css`\n background-color: ${themeGet(\"colors.mono5\")};\n border-color: ${themeGet(\"colors.mono5\")};\n color: ${themeGet(\"colors.mono60\")};\n `,\n },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Pointer/Pointer.js CHANGED Viewed

@@ -11,9 +11,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useMemo, useState, useCallback } from "react";
+import React, { FC, useEffect, useMemo, useState, useCallback } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
+import { Position } from "../../utils";
 import { useResizeObserver } from "../../utils/useResizeObserver";
 import { Box } from "../Box";
 import { themeGet } from "@styled-system/theme-get";

package/dist/esm/elements/Pointer/Pointer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pointer.js","names":["React","useEffect","useMemo","useState","useCallback","styled","variant","useResizeObserver","Box","themeGet","POINTER_VARIANTS","defaultLight","backgroundColor","defaultDark","Pointer","_ref","anchorRef","tooltipRef","isFlipped","placement","_ref$variant","_useState","_useState2","_slicedToArray","_useState2$","anchorWidth","anchorHeight","setAnchorDimensions","_useState3","_useState4","_useState4$","tooltipWidth","tooltipHeight","setTooltipDimensions","position","horizontalCenter","verticalCenter","bottom","left","concat","POINTER_WIDTH","right","top","_objectSpread","handleResize","current","anchorRect","getBoundingClientRect","tooltipRect","width","height","target","onResize","createElement","Container","_extends","displayName","POINTER_SIZE","Math","sqrt","pow","withConfig","componentId","variants"],"sources":["../../../../src/elements/Pointer/Pointer.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState, useCallback } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Position } from \"../../utils\"\nimport { useResizeObserver } from \"../../utils/useResizeObserver\"\nimport { Box } from \"../Box\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst POINTER_VARIANTS = {\n defaultLight: {\n backgroundColor: \"mono0\",\n },\n defaultDark: {\n backgroundColor: \"mono100\",\n },\n}\n\ntype PointerVariant = keyof typeof POINTER_VARIANTS\n\nexport interface PointerProps {\n anchorRef: React.RefObject<HTMLElement>\n tooltipRef: React.RefObject<HTMLElement>\n isFlipped: boolean\n placement: Position\n variant?: PointerVariant\n}\n\n/*\n Internal-use component for displaying a triangular pointer to an anchor node\n /\nexport const Pointer: FC<React.PropsWithChildren<PointerProps>> = ({\n anchorRef,\n tooltipRef,\n isFlipped,\n placement,\n variant = \"defaultLight\",\n}) => {\n const [[anchorWidth, anchorHeight], setAnchorDimensions] = useState([0, 0])\n const [[tooltipWidth, tooltipHeight], setTooltipDimensions] = useState([0, 0])\n\n const position = useMemo(() => {\n const horizontalCenter = anchorWidth / 2\n const verticalCenter = anchorHeight / 2\n\n switch (placement) {\n case \"top-start\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n left: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH\n : horizontalCenter - POINTER_WIDTH / 2\n }px`,\n }\n case \"top\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n }\n case \"top-end\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n right: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH 2\n : horizontalCenter + POINTER_WIDTH / 2\n }px`,\n }\n case \"bottom-start\":\n return {\n top: isFlipped ? \"100%\" : 0,\n left: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH\n : horizontalCenter - POINTER_WIDTH / 2\n }px`,\n }\n case \"bottom\":\n return {\n top: isFlipped ? \"100%\" : 0,\n left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n }\n case \"bottom-end\":\n return {\n top: isFlipped ? \"100%\" : 0,\n right: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH * 2\n : horizontalCenter + POINTER_WIDTH / 2\n }px`,\n }\n case \"left-start\":\n return {\n top: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"left\":\n return {\n top: \"50%\",\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"left-end\":\n return {\n bottom: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"right-start\":\n return {\n top: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n case \"right\":\n return {\n top: \"50%\",\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n case \"right-end\":\n return {\n bottom: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n }\n }, [\n anchorHeight,\n anchorWidth,\n isFlipped,\n placement,\n tooltipHeight,\n tooltipWidth,\n ])\n\n const handleResize = useCallback(() => {\n if (!anchorRef.current \|\| !tooltipRef.current) return\n\n const anchorRect = anchorRef.current.getBoundingClientRect()\n const tooltipRect = tooltipRef.current.getBoundingClientRect()\n\n setAnchorDimensions([anchorRect.width, anchorRect.height])\n setTooltipDimensions([tooltipRect.width, tooltipRect.height])\n }, [anchorRef, tooltipRef])\n\n useEffect(handleResize, [handleResize])\n\n useResizeObserver({ target: anchorRef, onResize: handleResize })\n\n return <Container variant={variant} {...position} />\n}\n\nconst POINTER_SIZE = 10 // px\nconst POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)) // px\n\nconst Container = styled(Box)<{ variant: PointerVariant }>`\n z-index: -1;\n position: absolute;\n\n &::after {\n content: \"\";\n position: absolute;\n width: ${POINTER_SIZE}px;\n height: ${POINTER_SIZE}px;\n transform-origin: 0 0;\n transform: rotate(-45deg);\n box-shadow: ${themeGet(\"effects.dropShadow\")};\n ${variant({ variants: POINTER_VARIANTS })}\n }\n`\n"],"mappings":"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"}
1	+ {"version":3,"file":"Pointer.js","names":["React","FC","useEffect","useMemo","useState","useCallback","styled","variant","Position","useResizeObserver","Box","themeGet","POINTER_VARIANTS","defaultLight","backgroundColor","defaultDark","Pointer","_ref","anchorRef","tooltipRef","isFlipped","placement","_ref$variant","_useState","_useState2","_slicedToArray","_useState2$","anchorWidth","anchorHeight","setAnchorDimensions","_useState3","_useState4","_useState4$","tooltipWidth","tooltipHeight","setTooltipDimensions","position","horizontalCenter","verticalCenter","bottom","left","concat","POINTER_WIDTH","right","top","_objectSpread","handleResize","current","anchorRect","getBoundingClientRect","tooltipRect","width","height","target","onResize","createElement","Container","_extends","displayName","POINTER_SIZE","Math","sqrt","pow","withConfig","componentId","variants"],"sources":["../../../../src/elements/Pointer/Pointer.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState, useCallback } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Position } from \"../../utils\"\nimport { useResizeObserver } from \"../../utils/useResizeObserver\"\nimport { Box } from \"../Box\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst POINTER_VARIANTS = {\n defaultLight: {\n backgroundColor: \"mono0\",\n },\n defaultDark: {\n backgroundColor: \"mono100\",\n },\n}\n\ntype PointerVariant = keyof typeof POINTER_VARIANTS\n\nexport interface PointerProps {\n anchorRef: React.RefObject<HTMLElement>\n tooltipRef: React.RefObject<HTMLElement>\n isFlipped: boolean\n placement: Position\n variant?: PointerVariant\n}\n\n/*\n Internal-use component for displaying a triangular pointer to an anchor node\n /\nexport const Pointer: FC<React.PropsWithChildren<PointerProps>> = ({\n anchorRef,\n tooltipRef,\n isFlipped,\n placement,\n variant = \"defaultLight\",\n}) => {\n const [[anchorWidth, anchorHeight], setAnchorDimensions] = useState([0, 0])\n const [[tooltipWidth, tooltipHeight], setTooltipDimensions] = useState([0, 0])\n\n const position = useMemo(() => {\n const horizontalCenter = anchorWidth / 2\n const verticalCenter = anchorHeight / 2\n\n switch (placement) {\n case \"top-start\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n left: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH\n : horizontalCenter - POINTER_WIDTH / 2\n }px`,\n }\n case \"top\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n }\n case \"top-end\":\n return {\n bottom: isFlipped ? \"100%\" : 0,\n right: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH 2\n : horizontalCenter + POINTER_WIDTH / 2\n }px`,\n }\n case \"bottom-start\":\n return {\n top: isFlipped ? \"100%\" : 0,\n left: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH\n : horizontalCenter - POINTER_WIDTH / 2\n }px`,\n }\n case \"bottom\":\n return {\n top: isFlipped ? \"100%\" : 0,\n left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n }\n case \"bottom-end\":\n return {\n top: isFlipped ? \"100%\" : 0,\n right: `${\n horizontalCenter > tooltipWidth\n ? POINTER_WIDTH * 2\n : horizontalCenter + POINTER_WIDTH / 2\n }px`,\n }\n case \"left-start\":\n return {\n top: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"left\":\n return {\n top: \"50%\",\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"left-end\":\n return {\n bottom: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n\n ...(isFlipped\n ? { left: `-${POINTER_WIDTH / 2}px` }\n : { right: `${POINTER_WIDTH / 2}px` }),\n }\n case \"right-start\":\n return {\n top: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n case \"right\":\n return {\n top: \"50%\",\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n case \"right-end\":\n return {\n bottom: `${\n verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n ? POINTER_WIDTH\n : verticalCenter\n }px`,\n ...(isFlipped\n ? { right: `${POINTER_WIDTH / 2}px` }\n : { left: `-${POINTER_WIDTH / 2}px` }),\n }\n }\n }, [\n anchorHeight,\n anchorWidth,\n isFlipped,\n placement,\n tooltipHeight,\n tooltipWidth,\n ])\n\n const handleResize = useCallback(() => {\n if (!anchorRef.current \|\| !tooltipRef.current) return\n\n const anchorRect = anchorRef.current.getBoundingClientRect()\n const tooltipRect = tooltipRef.current.getBoundingClientRect()\n\n setAnchorDimensions([anchorRect.width, anchorRect.height])\n setTooltipDimensions([tooltipRect.width, tooltipRect.height])\n }, [anchorRef, tooltipRef])\n\n useEffect(handleResize, [handleResize])\n\n useResizeObserver({ target: anchorRef, onResize: handleResize })\n\n return <Container variant={variant} {...position} />\n}\n\nconst POINTER_SIZE = 10 // px\nconst POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)) // px\n\nconst Container = styled(Box)<{ variant: PointerVariant }>`\n z-index: -1;\n position: absolute;\n\n &::after {\n content: \"\";\n position: absolute;\n width: ${POINTER_SIZE}px;\n height: ${POINTER_SIZE}px;\n transform-origin: 0 0;\n transform: rotate(-45deg);\n box-shadow: ${themeGet(\"effects.dropShadow\")};\n ${variant({ variants: POINTER_VARIANTS })}\n }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Popover/Popover.js CHANGED Viewed

@@ -12,9 +12,9 @@ import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
 import CloseIcon from "@artsy/icons/CloseIcon";
-import { useClickOutside, usePortal, usePosition } from "../../utils";
+import { Position, useClickOutside, usePortal, usePosition } from "../../utils";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Clickable } from "../Clickable";
 import { Pointer } from "../Pointer";
 import { themeGet } from "@styled-system/theme-get";

package/dist/esm/elements/Popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","names":["React","useCallback","useEffect","useState","styled","variant","CloseIcon","useClickOutside","usePortal","usePosition","useUpdateEffect","Box","Clickable","Pointer","themeGet","POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","_ref","children","_ref$ignoreClickOutsi","ignoreClickOutside","_ref$manageFocus","manageFocus","_ref$offset","offset","onClose","onDismiss","_ref$placement","placement","_ref$pointer","pointer","popover","_ref$showCloseButton","showCloseButton","_ref$variant","_ref$visible","visible","_visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleDismiss","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","active","isFlipped","state","ref","onClickOutside","when","type","_usePortal","createPortal","createElement","Fragment","Tip","tabIndex","display","Close","p","onClick","fill","Panel","_extends","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const POPOVER_VARIANTS = {\n defaultLight: {\n backgroundColor: \"mono0\",\n color: \"mono100\",\n },\n defaultDark: {\n backgroundColor: \"mono100\",\n color: \"mono0\",\n },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n /** Call to show popover /\n onVisible(): void\n /* Call to hide popover /\n onHide(): void\n /* Call to dismiss popover /\n onDismiss(): void\n /* Pass ref to element you want the popover to be anchored to /\n anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n children: (actions: PopoverActions) => JSX.Element\n ignoreClickOutside?: boolean\n manageFocus?: boolean\n offset?: number\n /* Called whenever the Popver is closed (both explcitly dismissed and through click outside) /\n onClose?: () => void\n /* Called whenever the Popover is dismissed (explicitly) /\n onDismiss?: () => void\n placement?: Position\n /* Display triangular pointer back to anchor node /\n pointer?: boolean\n popover:\n \| ((actions: Omit<PopoverActions, \"anchorRef\">) => JSX.Element)\n \| React.ReactNode\n /* Show the close icon button /\n showCloseButton?: boolean\n variant?: PopoverVariant\n /* Initial default visibility /\n visible?: boolean\n}\n\n/\n A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover = ({\n children,\n ignoreClickOutside = false,\n manageFocus = true,\n offset = 10,\n onClose,\n onDismiss,\n placement = \"top\",\n pointer = false,\n popover,\n showCloseButton = true,\n variant = \"defaultLight\",\n visible: _visible = false,\n zIndex = 1,\n ...rest\n}: PopoverProps) => {\n const [visible, setVisible] = useState(false)\n\n // If prop updates/set initial visibility.\n useEffect(() => {\n setVisible(_visible)\n }, [_visible])\n\n // Yields focus back and forth between popover and anchor\n useUpdateEffect(() => {\n if (!manageFocus) return\n\n if (visible && tooltipRef.current) {\n tooltipRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const onVisible = useCallback(() => {\n setVisible(true)\n }, [])\n\n const onHide = useCallback(() => {\n setVisible(false)\n }, [])\n\n const handleHide = useCallback(() => {\n onHide()\n onClose?.()\n }, [onHide, onClose])\n\n const handleDismiss = useCallback(() => {\n handleHide()\n onDismiss?.()\n }, [handleHide, onDismiss])\n\n useEffect(() => {\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n handleHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeydown)\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown)\n }\n }, [handleHide])\n\n const {\n anchorRef,\n tooltipRef,\n state: { isFlipped },\n } = usePosition({\n position: placement,\n offset,\n active: visible,\n })\n\n useClickOutside({\n ref: tooltipRef,\n onClickOutside: handleHide,\n when: visible && !ignoreClickOutside,\n type: \"click\",\n })\n\n const { createPortal } = usePortal()\n\n return (\n <>\n {children({\n anchorRef: anchorRef as any,\n onVisible,\n onHide: handleHide,\n onDismiss: handleDismiss,\n })}\n\n {visible &&\n createPortal(\n <Tip\n tabIndex={0}\n ref={tooltipRef as any}\n zIndex={zIndex}\n display=\"inline-block\"\n position=\"relative\"\n variant={variant}\n >\n {pointer && (\n <Pointer\n anchorRef={anchorRef}\n tooltipRef={tooltipRef}\n variant={variant}\n placement={placement}\n isFlipped={isFlipped}\n />\n )}\n\n {showCloseButton && (\n <Close\n position=\"relative\"\n zIndex={2}\n p={1}\n onClick={handleDismiss}\n aria-label=\"Close\"\n >\n <CloseIcon fill=\"currentColor\" display=\"block\" />\n </Close>\n )}\n\n <Panel\n variant={variant}\n position=\"relative\"\n p={1}\n zIndex={1}\n {...rest}\n >\n {typeof popover === \"function\"\n ? popover({\n onVisible,\n onHide: handleHide,\n onDismiss: handleDismiss,\n })\n : popover}\n </Panel>\n </Tip>\n )}\n </>\n )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n position: fixed;\n text-align: left;\n transition: opacity 250ms ease-out;\n box-shadow: ${themeGet(\"effects.dropShadow\")};\n ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n float: right;\n`\n"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","names":["React","useCallback","useEffect","useState","styled","variant","CloseIcon","Position","useClickOutside","usePortal","usePosition","useUpdateEffect","Box","BoxProps","Clickable","Pointer","themeGet","POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","_ref","children","_ref$ignoreClickOutsi","ignoreClickOutside","_ref$manageFocus","manageFocus","_ref$offset","offset","onClose","onDismiss","_ref$placement","placement","_ref$pointer","pointer","popover","_ref$showCloseButton","showCloseButton","_ref$variant","_ref$visible","visible","_visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleDismiss","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","active","isFlipped","state","ref","onClickOutside","when","type","_usePortal","createPortal","createElement","Fragment","Tip","tabIndex","display","Close","p","onClick","fill","Panel","_extends","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const POPOVER_VARIANTS = {\n defaultLight: {\n backgroundColor: \"mono0\",\n color: \"mono100\",\n },\n defaultDark: {\n backgroundColor: \"mono100\",\n color: \"mono0\",\n },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n /** Call to show popover /\n onVisible(): void\n /* Call to hide popover /\n onHide(): void\n /* Call to dismiss popover /\n onDismiss(): void\n /* Pass ref to element you want the popover to be anchored to /\n anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n children: (actions: PopoverActions) => JSX.Element\n ignoreClickOutside?: boolean\n manageFocus?: boolean\n offset?: number\n /* Called whenever the Popver is closed (both explcitly dismissed and through click outside) /\n onClose?: () => void\n /* Called whenever the Popover is dismissed (explicitly) /\n onDismiss?: () => void\n placement?: Position\n /* Display triangular pointer back to anchor node /\n pointer?: boolean\n popover:\n \| ((actions: Omit<PopoverActions, \"anchorRef\">) => JSX.Element)\n \| React.ReactNode\n /* Show the close icon button /\n showCloseButton?: boolean\n variant?: PopoverVariant\n /* Initial default visibility /\n visible?: boolean\n}\n\n/\n A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover = ({\n children,\n ignoreClickOutside = false,\n manageFocus = true,\n offset = 10,\n onClose,\n onDismiss,\n placement = \"top\",\n pointer = false,\n popover,\n showCloseButton = true,\n variant = \"defaultLight\",\n visible: _visible = false,\n zIndex = 1,\n ...rest\n}: PopoverProps) => {\n const [visible, setVisible] = useState(false)\n\n // If prop updates/set initial visibility.\n useEffect(() => {\n setVisible(_visible)\n }, [_visible])\n\n // Yields focus back and forth between popover and anchor\n useUpdateEffect(() => {\n if (!manageFocus) return\n\n if (visible && tooltipRef.current) {\n tooltipRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const onVisible = useCallback(() => {\n setVisible(true)\n }, [])\n\n const onHide = useCallback(() => {\n setVisible(false)\n }, [])\n\n const handleHide = useCallback(() => {\n onHide()\n onClose?.()\n }, [onHide, onClose])\n\n const handleDismiss = useCallback(() => {\n handleHide()\n onDismiss?.()\n }, [handleHide, onDismiss])\n\n useEffect(() => {\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n handleHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeydown)\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown)\n }\n }, [handleHide])\n\n const {\n anchorRef,\n tooltipRef,\n state: { isFlipped },\n } = usePosition({\n position: placement,\n offset,\n active: visible,\n })\n\n useClickOutside({\n ref: tooltipRef,\n onClickOutside: handleHide,\n when: visible && !ignoreClickOutside,\n type: \"click\",\n })\n\n const { createPortal } = usePortal()\n\n return (\n <>\n {children({\n anchorRef: anchorRef as any,\n onVisible,\n onHide: handleHide,\n onDismiss: handleDismiss,\n })}\n\n {visible &&\n createPortal(\n <Tip\n tabIndex={0}\n ref={tooltipRef as any}\n zIndex={zIndex}\n display=\"inline-block\"\n position=\"relative\"\n variant={variant}\n >\n {pointer && (\n <Pointer\n anchorRef={anchorRef}\n tooltipRef={tooltipRef}\n variant={variant}\n placement={placement}\n isFlipped={isFlipped}\n />\n )}\n\n {showCloseButton && (\n <Close\n position=\"relative\"\n zIndex={2}\n p={1}\n onClick={handleDismiss}\n aria-label=\"Close\"\n >\n <CloseIcon fill=\"currentColor\" display=\"block\" />\n </Close>\n )}\n\n <Panel\n variant={variant}\n position=\"relative\"\n p={1}\n zIndex={1}\n {...rest}\n >\n {typeof popover === \"function\"\n ? popover({\n onVisible,\n onHide: handleHide,\n onDismiss: handleDismiss,\n })\n : popover}\n </Panel>\n </Tip>\n )}\n </>\n )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n position: fixed;\n text-align: left;\n transition: opacity 250ms ease-out;\n box-shadow: ${themeGet(\"effects.dropShadow\")};\n ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n float: right;\n`\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,QAAQ,EAAEC,eAAe,EAAEC,SAAS,EAAEC,WAAW;AAC1D,SAASC,eAAe;AACxB,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,SAAS;AAClB,SAASC,OAAO;AAChB,SAASC,QAAQ,QAAQ,0BAA0B;AAEnD,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,YAAY,EAAE;IACZC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,WAAW,EAAE;IACXF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AAqCD;AACA;AACA;AACA;AACA,OAAO,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAeA;EAAA,IAdlBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,qBAAA,GAAAF,IAAA,CACRG,kBAAkB;IAAlBA,kBAAkB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,gBAAA,GAAAJ,IAAA,CAC1BK,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,IAAI,GAAAA,gBAAA;IAAAE,WAAA,GAAAN,IAAA,CAClBO,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IACXE,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACPC,SAAS,GAAAT,IAAA,CAATS,SAAS;IAAAC,cAAA,GAAAV,IAAA,CACTW,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,YAAA,GAAAZ,IAAA,CACjBa,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,OAAO,GAAAd,IAAA,CAAPc,OAAO;IAAAC,oBAAA,GAAAf,IAAA,CACPgB,eAAe;IAAfA,eAAe,GAAAD,oBAAA,cAAG,IAAI,GAAAA,oBAAA;IAAAE,YAAA,GAAAjB,IAAA,CACtBlB,OAAO;IAAPA,OAAO,GAAAmC,YAAA,cAAG,cAAc,GAAAA,YAAA;IAAAC,YAAA,GAAAlB,IAAA,CACxBmB,OAAO;IAAEC,QAAQ,GAAAF,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAG,WAAA,GAAArB,IAAA,CACzBsB,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACPE,IAAI,GAAAC,wBAAA,CAAAxB,IAAA,EAAAyB,SAAA;EAEP,IAAAC,SAAA,GAA8B9C,QAAQ,CAAC,KAAK,CAAC;IAAA+C,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAtCP,OAAO,GAAAQ,UAAA;IAAEE,UAAU,GAAAF,UAAA;;EAE1B;EACAhD,SAAS,CAAC,YAAM;IACdkD,UAAU,CAACT,QAAQ,CAAC;EACtB,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;EACAhC,eAAe,CAAC,YAAM;IACpB,IAAI,CAACiB,WAAW,EAAE;IAElB,IAAIc,OAAO,IAAIW,UAAU,CAACC,OAAO,EAAE;MACjCD,UAAU,CAACC,OAAO,CAACC,KAAK,EAAE;MAC1B;IACF;IAEA,IAAI,CAACC,SAAS,CAACF,OAAO,EAAE;IACxBE,SAAS,CAACF,OAAO,CAACC,KAAK,EAAE;EAC3B,CAAC,EAAE,CAACb,OAAO,CAAC,CAAC;EAEb,IAAMe,SAAS,GAAGxD,WAAW,CAAC,YAAM;IAClCmD,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMM,MAAM,GAAGzD,WAAW,CAAC,YAAM;IAC/BmD,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMO,UAAU,GAAG1D,WAAW,CAAC,YAAM;IACnCyD,MAAM,EAAE;IACR3B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,EAAI;EACb,CAAC,EAAE,CAAC2B,MAAM,EAAE3B,OAAO,CAAC,CAAC;EAErB,IAAM6B,aAAa,GAAG3D,WAAW,CAAC,YAAM;IACtC0D,UAAU,EAAE;IACZ3B,SAAS,aAATA,SAAS,uBAATA,SAAS,EAAI;EACf,CAAC,EAAE,CAAC2B,UAAU,EAAE3B,SAAS,CAAC,CAAC;EAE3B9B,SAAS,CAAC,YAAM;IACd,IAAM2D,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAoB,EAAK;MAC9C,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QAC1BJ,UAAU,EAAE;MACd;IACF,CAAC;IAEDK,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,aAAa,CAAC;IAEnD,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC;IACxD,CAAC;EACH,CAAC,EAAE,CAACF,UAAU,CAAC,CAAC;EAEhB,IAAAQ,YAAA,GAIIzD,WAAW,CAAC;MACd0D,QAAQ,EAAElC,SAAS;MACnBJ,MAAM,EAANA,MAAM;MACNuC,MAAM,EAAE3B;IACV,CAAC,CAAC;IAPAc,SAAS,GAAAW,YAAA,CAATX,SAAS;IACTH,UAAU,GAAAc,YAAA,CAAVd,UAAU;IACDiB,SAAS,GAAAH,YAAA,CAAlBI,KAAK,CAAID,SAAS;EAOpB9D,eAAe,CAAC;IACdgE,GAAG,EAAEnB,UAAU;IACfoB,cAAc,EAAEd,UAAU;IAC1Be,IAAI,EAAEhC,OAAO,IAAI,CAAChB,kBAAkB;IACpCiD,IAAI,EAAE;EACR,CAAC,CAAC;EAEF,IAAAC,UAAA,GAAyBnE,SAAS,EAAE;IAA5BoE,YAAY,GAAAD,UAAA,CAAZC,YAAY;EAEpB,oBACE7E,KAAA,CAAA8E,aAAA,CAAA9E,KAAA,CAAA+E,QAAA,QACGvD,QAAQ,CAAC;IACRgC,SAAS,EAAEA,SAAgB;IAC3BC,SAAS,EAATA,SAAS;IACTC,MAAM,EAAEC,UAAU;IAClB3B,SAAS,EAAE4B;EACb,CAAC,CAAC,EAEDlB,OAAO,IACNmC,YAAY,eACV7E,KAAA,CAAA8E,aAAA,CAACE,GAAG;IACFC,QAAQ,EAAE,CAAE;IACZT,GAAG,EAAEnB,UAAkB;IACvBR,MAAM,EAAEA,MAAO;IACfqC,OAAO,EAAC,cAAc;IACtBd,QAAQ,EAAC,UAAU;IACnB/D,OAAO,EAAEA;EAAQ,GAEhB+B,OAAO,iBACNpC,KAAA,CAAA8E,aAAA,CAAC/D,OAAO;IACNyC,SAAS,EAAEA,SAAU;IACrBH,UAAU,EAAEA,UAAW;IACvBhD,OAAO,EAAEA,OAAQ;IACjB6B,SAAS,EAAEA,SAAU;IACrBoC,SAAS,EAAEA;EAAU,EAExB,EAEA/B,eAAe,iBACdvC,KAAA,CAAA8E,aAAA,CAACK,KAAK;IACJf,QAAQ,EAAC,UAAU;IACnBvB,MAAM,EAAE,CAAE;IACVuC,CAAC,EAAE,CAAE;IACLC,OAAO,EAAEzB,aAAc;IACvB,cAAW;EAAO,gBAElB5D,KAAA,CAAA8E,aAAA,CAACxE,SAAS;IAACgF,IAAI,EAAC,cAAc;IAACJ,OAAO,EAAC;EAAO,EAAG,CAEpD,eAEDlF,KAAA,CAAA8E,aAAA,CAACS,KAAK,EAAAC,QAAA;IACJnF,OAAO,EAAEA,OAAQ;IACjB+D,QAAQ,EAAC,UAAU;IACnBgB,CAAC,EAAE,CAAE;IACLvC,MAAM,EAAE;EAAE,GACNC,IAAI,GAEP,OAAOT,OAAO,KAAK,UAAU,GAC1BA,OAAO,CAAC;IACNoB,SAAS,EAATA,SAAS;IACTC,MAAM,EAAEC,UAAU;IAClB3B,SAAS,EAAE4B;EACb,CAAC,CAAC,GACFvB,OAAO,CACL,CACJ,CACP,CACF;AAEP,CAAC;AAED,IAAM2C,GAAG,GAAG5E,MAAM,CAACQ,GAAG,CAAC,CAAA6E,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8FAIP3E,QAAQ,CAAC,oBAAoB,CAAC,EAC1CX,OAAO,CAAC;EAAEuF,QAAQ,EAAE3E;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAMsE,KAAK,GAAGnF,MAAM,CAACQ,GAAG,CAAC,CAAA6E,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACrBtF,OAAO,CAAC;EAAEuF,QAAQ,EAAE3E;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAMkE,KAAK,GAAG/E,MAAM,CAACU,SAAS,CAAC,CAAA2E,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oBAE9B"}

package/dist/esm/elements/Popover/Popover.story.js CHANGED Viewed

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { States } from "storybook-states";
-import { POSITION } from "../../utils";
+import { Position, POSITION } from "../../utils";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-import { Popover } from "./Popover";
+import { Popover, PopoverProps } from "./Popover";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.";
 export default {

package/dist/esm/elements/Popover/Popover.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.story.js","names":["React","States","POSITION","Box","Button","Flex","Spacer","Text","Popover","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","popover","createElement","variant","width","children","_ref","onVisible","anchorRef","textAlign","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","i","key","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","HideCloseButton","showCloseButton","_ref6","IgnoreClickOutside","ignoreClickOutside","_ref7","Placement","render","states","Object","keys","props","_extends","JSON","stringify","_ref8","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref9","PopoverActions","_ref10","onHide","onDismiss","y","flex","x","_ref11","CrashAtSpecificZoomLevels","height","_ref12","_ref13"],"sources":["../../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n component: Popover,\n title: \"Components/Popover\",\n tags: [\"autodocs\"],\n parameters: {\n docs: {\n description: {\n component:\n \"A floating popover component that can be positioned relative to an anchor element.\",\n },\n },\n controls: {\n exclude: STORYBOOK_PROPS_BLOCKLIST,\n },\n },\n}\n\nexport const Default = {\n args: {\n placement: \"bottom\",\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Default popover.\",\n },\n },\n },\n}\n\nexport const Visible = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Visible\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover visible state.\",\n },\n },\n },\n}\n\nexport const WithContentInteraction = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| — (Content interaction with\n close button.)\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover With Content Interaction\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with content interaction.\",\n },\n },\n },\n}\n\nexport const Pointer = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n pointer: true,\n visible: true,\n p: 0,\n popover: (\n <>\n {new Array(4).fill(0).map((_, i) => (\n <Text\n key={i}\n variant=\"sm-display\"\n overflowEllipsis\n bg=\"red10\"\n px={1}\n py={0.5}\n >\n Example Item\n </Text>\n ))}\n </>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover With Pointer\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with pointer and multiple items.\",\n },\n },\n },\n}\n\nexport const DarkVariant = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n variant: \"defaultDark\",\n visible: true,\n pointer: true,\n zIndex: 99,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Dark Variant\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with dark variant styling.\",\n },\n },\n },\n}\n\nexport const HideCloseButton = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n showCloseButton: false,\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Without Close Button\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with close button hidden.\",\n },\n },\n },\n}\n\nexport const IgnoreClickOutside = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n ignoreClickOutside: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Ignore Click Outside\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with ignoreClickOutside enabled.\",\n },\n },\n },\n}\n\nexport const Placement = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>>\n states={Object.keys(POSITION).map((placement) => ({\n placement: placement as Position,\n }))}\n >\n {(props) => (\n <Popover\n popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n visible\n variant=\"defaultDark\"\n pointer\n {...props}\n >\n {({ anchorRef }) => (\n <Text\n ref={anchorRef as any}\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n maxWidth=\"50%\"\n mx=\"auto\"\n bg=\"mono10\"\n >\n {JSON.stringify(props)}\n </Text>\n )}\n </Popover>\n )}\n </States>\n ),\n parameters: {\n chromatic: { disable: true },\n docs: {\n description: {\n story: \"Popover shown in all available placement positions.\",\n },\n },\n },\n}\n\nexport const ManageFocus = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>>\n states={[\n { visible: true, manageFocus: false },\n { visible: true, manageFocus: true },\n ]}\n >\n <Popover\n placement=\"bottom\"\n popover={\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n }\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </States>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Popover with different focus management settings.\",\n },\n },\n },\n}\n\nexport const PopoverActions = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n <Popover\n placement=\"bottom\"\n popover={({ onHide, onDismiss }) => (\n <>\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n\n <Spacer y={2} />\n\n <Flex>\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onHide}\n >\n Hide\n </Button>\n\n <Spacer x={1} />\n\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onDismiss}\n >\n Dismiss\n </Button>\n </Flex>\n </>\n )}\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </States>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Popover with action buttons (Hide and Dismiss).\",\n },\n },\n },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n tags: [\"!autodocs\"],\n render: () => (\n <>\n <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n <Box height={2000} bg=\"mono5\">\n <Box height={200} />\n\n <Popover\n placement=\"top\"\n popover={({ onHide, onDismiss }) => (\n <>\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n\n <Spacer y={2} />\n\n <Flex>\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onHide}\n >\n Hide\n </Button>\n\n <Spacer x={1} />\n\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onDismiss}\n >\n Dismiss\n </Button>\n </Flex>\n </>\n )}\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </Box>\n </>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Test case for popover behavior at specific zoom levels.\",\n },\n },\n },\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.story.js","names":["React","States","Position","POSITION","Box","Button","Flex","Spacer","Text","Popover","PopoverProps","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","popover","createElement","variant","width","children","_ref","onVisible","anchorRef","textAlign","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","i","key","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","HideCloseButton","showCloseButton","_ref6","IgnoreClickOutside","ignoreClickOutside","_ref7","Placement","render","states","Object","keys","props","_extends","JSON","stringify","_ref8","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref9","PopoverActions","_ref10","onHide","onDismiss","y","flex","x","_ref11","CrashAtSpecificZoomLevels","height","_ref12","_ref13"],"sources":["../../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n component: Popover,\n title: \"Components/Popover\",\n tags: [\"autodocs\"],\n parameters: {\n docs: {\n description: {\n component:\n \"A floating popover component that can be positioned relative to an anchor element.\",\n },\n },\n controls: {\n exclude: STORYBOOK_PROPS_BLOCKLIST,\n },\n },\n}\n\nexport const Default = {\n args: {\n placement: \"bottom\",\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Default popover.\",\n },\n },\n },\n}\n\nexport const Visible = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Visible\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover visible state.\",\n },\n },\n },\n}\n\nexport const WithContentInteraction = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \|\n \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| \| — (Content interaction with\n close button.)\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover With Content Interaction\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with content interaction.\",\n },\n },\n },\n}\n\nexport const Pointer = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n pointer: true,\n visible: true,\n p: 0,\n popover: (\n <>\n {new Array(4).fill(0).map((_, i) => (\n <Text\n key={i}\n variant=\"sm-display\"\n overflowEllipsis\n bg=\"red10\"\n px={1}\n py={0.5}\n >\n Example Item\n </Text>\n ))}\n </>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover With Pointer\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with pointer and multiple items.\",\n },\n },\n },\n}\n\nexport const DarkVariant = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n variant: \"defaultDark\",\n visible: true,\n pointer: true,\n zIndex: 99,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Dark Variant\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with dark variant styling.\",\n },\n },\n },\n}\n\nexport const HideCloseButton = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n showCloseButton: false,\n visible: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Without Close Button\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with close button hidden.\",\n },\n },\n },\n}\n\nexport const IgnoreClickOutside = {\n tags: [\"!autodocs\"],\n args: {\n placement: \"bottom\",\n visible: true,\n ignoreClickOutside: true,\n popover: (\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n ),\n children: ({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Popover Ignore Click Outside\n </Button>\n </Box>\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Popover with ignoreClickOutside enabled.\",\n },\n },\n },\n}\n\nexport const Placement = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>>\n states={Object.keys(POSITION).map((placement) => ({\n placement: placement as Position,\n }))}\n >\n {(props) => (\n <Popover\n popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n visible\n variant=\"defaultDark\"\n pointer\n {...props}\n >\n {({ anchorRef }) => (\n <Text\n ref={anchorRef as any}\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n maxWidth=\"50%\"\n mx=\"auto\"\n bg=\"mono10\"\n >\n {JSON.stringify(props)}\n </Text>\n )}\n </Popover>\n )}\n </States>\n ),\n parameters: {\n chromatic: { disable: true },\n docs: {\n description: {\n story: \"Popover shown in all available placement positions.\",\n },\n },\n },\n}\n\nexport const ManageFocus = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>>\n states={[\n { visible: true, manageFocus: false },\n { visible: true, manageFocus: true },\n ]}\n >\n <Popover\n placement=\"bottom\"\n popover={\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n }\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </States>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Popover with different focus management settings.\",\n },\n },\n },\n}\n\nexport const PopoverActions = {\n tags: [\"!autodocs\"],\n render: () => (\n <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n <Popover\n placement=\"bottom\"\n popover={({ onHide, onDismiss }) => (\n <>\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n\n <Spacer y={2} />\n\n <Flex>\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onHide}\n >\n Hide\n </Button>\n\n <Spacer x={1} />\n\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onDismiss}\n >\n Dismiss\n </Button>\n </Flex>\n </>\n )}\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </States>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Popover with action buttons (Hide and Dismiss).\",\n },\n },\n },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n tags: [\"!autodocs\"],\n render: () => (\n <>\n <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n <Box height={2000} bg=\"mono5\">\n <Box height={200} />\n\n <Popover\n placement=\"top\"\n popover={({ onHide, onDismiss }) => (\n <>\n <Text variant=\"xs\" width={300}>\n {CONTENT}\n </Text>\n\n <Spacer y={2} />\n\n <Flex>\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onHide}\n >\n Hide\n </Button>\n\n <Spacer x={1} />\n\n <Button\n flex={1}\n size=\"small\"\n variant=\"secondaryBlack\"\n onClick={onDismiss}\n >\n Dismiss\n </Button>\n </Flex>\n </>\n )}\n >\n {({ onVisible, anchorRef }) => (\n <Box textAlign=\"center\">\n <Button\n ref={anchorRef}\n variant=\"secondaryBlack\"\n size=\"small\"\n onClick={onVisible}\n >\n Click to display popover\n </Button>\n </Box>\n )}\n </Popover>\n </Box>\n </>\n ),\n parameters: {\n docs: {\n description: {\n story: \"Test case for popover behavior at specific zoom levels.\",\n },\n },\n },\n}\n"],"mappings":"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"}

package/dist/esm/elements/ProgressBar/ProgressBar.js CHANGED Viewed

@@ -3,7 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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; }
 import React from "react";
-import { Box } from "../Box";
+import { Color } from "../../themes/types";
+import { Box, BoxProps } from "../Box";
 /** ProgressBar */
 export var ProgressBar = function ProgressBar(_ref) {
   var percentComplete = _ref.percentComplete,