@artsy/palette 23.0.0 → 24.1.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.
- package/CHANGELOG.md +50 -0
- package/dist/Theme.js +15 -29
- package/dist/Theme.js.map +1 -1
- package/dist/elements/Dropdown/Dropdown.js +10 -1
- package/dist/elements/Dropdown/Dropdown.js.map +1 -1
- package/dist/elements/Select/Select.js +1 -1
- package/dist/elements/Select/Select.js.map +1 -1
- package/dist/elements/index.d.ts +0 -1
- package/dist/elements/index.js +0 -13
- package/dist/elements/index.js.map +1 -1
- package/package.json +2 -3
- package/dist/elements/Grid/Grid.d.ts +0 -16
- package/dist/elements/Grid/Grid.js +0 -50
- package/dist/elements/Grid/Grid.js.map +0 -1
- package/dist/elements/Grid/Grid.story.d.ts +0 -5
- package/dist/elements/Grid/Grid.story.js +0 -41
- package/dist/elements/Grid/Grid.story.js.map +0 -1
- package/dist/elements/Grid/index.d.ts +0 -1
- package/dist/elements/Grid/index.js +0 -19
- package/dist/elements/Grid/index.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,53 @@
|
|
|
1
|
+
# v24.1.0 (Tue Aug 30 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- feat: close dropdown only when link is clicked [#1203](https://github.com/artsy/palette/pull/1203) ([@dimatretyak](https://github.com/dimatretyak))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- feat: close dropdown only when link is clicked ([@dimatretyak](https://github.com/dimatretyak))
|
|
10
|
+
|
|
11
|
+
#### 🏠 Internal
|
|
12
|
+
|
|
13
|
+
- chore(deps): bump moment from 2.29.1 to 2.29.4 [#1191](https://github.com/artsy/palette/pull/1191) ([@dependabot[bot]](https://github.com/dependabot[bot]))
|
|
14
|
+
|
|
15
|
+
#### Authors: 2
|
|
16
|
+
|
|
17
|
+
- [@dependabot[bot]](https://github.com/dependabot[bot])
|
|
18
|
+
- Dima Tretyak (Dzmitry Tratsiak) ([@dimatretyak](https://github.com/dimatretyak))
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# v24.0.1 (Fri Jul 15 2022)
|
|
23
|
+
|
|
24
|
+
#### 🐛 Bug Fix
|
|
25
|
+
|
|
26
|
+
- fix(select): supresses top margin when inline [#1196](https://github.com/artsy/palette/pull/1196) ([@dzucconi](https://github.com/dzucconi))
|
|
27
|
+
- fix(select): supresses top margin when inline ([@dzucconi](https://github.com/dzucconi))
|
|
28
|
+
|
|
29
|
+
#### Authors: 1
|
|
30
|
+
|
|
31
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
# v24.0.0 (Fri Jul 15 2022)
|
|
36
|
+
|
|
37
|
+
#### 💥 Breaking Change
|
|
38
|
+
|
|
39
|
+
- chore: removes grid + styled-bootstrap-grid [#1195](https://github.com/artsy/palette/pull/1195) ([@dzucconi](https://github.com/dzucconi))
|
|
40
|
+
|
|
41
|
+
#### 🐛 Bug Fix
|
|
42
|
+
|
|
43
|
+
- chore: removes grid + styled-bootstrap-grid ([@dzucconi](https://github.com/dzucconi))
|
|
44
|
+
|
|
45
|
+
#### Authors: 1
|
|
46
|
+
|
|
47
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
1
51
|
# v23.0.0 (Fri Jul 15 2022)
|
|
2
52
|
|
|
3
53
|
#### 💥 Breaking Change
|
package/dist/Theme.js
CHANGED
|
@@ -40,8 +40,6 @@ exports.useThemeConfig = exports.useTheme = exports.isThemeV3 = exports.isThemeV
|
|
|
40
40
|
|
|
41
41
|
var _react = _interopRequireWildcard(require("react"));
|
|
42
42
|
|
|
43
|
-
var _styledBootstrapGrid = require("styled-bootstrap-grid");
|
|
44
|
-
|
|
45
43
|
var _styledComponents = require("styled-components");
|
|
46
44
|
|
|
47
45
|
var _themes = require("./themes");
|
|
@@ -69,18 +67,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
69
67
|
// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.
|
|
70
68
|
// Notably: `Icon` and `Sans|Serif`
|
|
71
69
|
// @ts-expect-error MIGRATE_STRICT_MODE
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Creates a new Grid context for web. This glues the v2 grid theme into any other theme.
|
|
75
|
-
*/
|
|
76
|
-
var GridThemeProvider = function GridThemeProvider(_ref) {
|
|
77
|
-
var children = _ref.children;
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_styledBootstrapGrid.GridThemeProvider, {
|
|
79
|
-
gridTheme: _themes.THEME_V2.grid
|
|
80
|
-
}, children);
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
GridThemeProvider.displayName = "GridThemeProvider";
|
|
84
70
|
var THEMES = {
|
|
85
71
|
v2: _themes.THEME_V2,
|
|
86
72
|
v3: _themes.THEME_V3
|
|
@@ -89,22 +75,22 @@ var THEMES = {
|
|
|
89
75
|
* A wrapper component for passing down the Artsy theme context
|
|
90
76
|
*/
|
|
91
77
|
|
|
92
|
-
var Theme = function Theme(
|
|
93
|
-
var children =
|
|
94
|
-
|
|
95
|
-
themeOrThemeKey =
|
|
78
|
+
var Theme = function Theme(_ref) {
|
|
79
|
+
var children = _ref.children,
|
|
80
|
+
_ref$theme = _ref.theme,
|
|
81
|
+
themeOrThemeKey = _ref$theme === void 0 ? _themes.THEME_V2 : _ref$theme;
|
|
96
82
|
var theme = themeOrThemeKey === "v2" || themeOrThemeKey === "v3" ? THEMES[themeOrThemeKey] : themeOrThemeKey;
|
|
97
83
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
98
84
|
theme: theme
|
|
99
|
-
},
|
|
85
|
+
}, children);
|
|
100
86
|
};
|
|
101
87
|
|
|
102
88
|
exports.Theme = Theme;
|
|
103
89
|
Theme.displayName = "Theme";
|
|
104
90
|
|
|
105
91
|
/** Utilize only the v2 theme */
|
|
106
|
-
var ThemeProviderV2 = function ThemeProviderV2(
|
|
107
|
-
var children =
|
|
92
|
+
var ThemeProviderV2 = function ThemeProviderV2(_ref2) {
|
|
93
|
+
var children = _ref2.children;
|
|
108
94
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
109
95
|
theme: _themes.THEME_V2
|
|
110
96
|
}, children);
|
|
@@ -114,8 +100,8 @@ exports.ThemeProviderV2 = ThemeProviderV2;
|
|
|
114
100
|
ThemeProviderV2.displayName = "ThemeProviderV2";
|
|
115
101
|
|
|
116
102
|
/** Utilize only the v3 theme */
|
|
117
|
-
var ThemeProviderV3 = function ThemeProviderV3(
|
|
118
|
-
var children =
|
|
103
|
+
var ThemeProviderV3 = function ThemeProviderV3(_ref3) {
|
|
104
|
+
var children = _ref3.children;
|
|
119
105
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
120
106
|
theme: _themes.THEME_V3
|
|
121
107
|
}, children);
|
|
@@ -136,9 +122,9 @@ var useTheme = function useTheme() {
|
|
|
136
122
|
|
|
137
123
|
exports.useTheme = useTheme;
|
|
138
124
|
|
|
139
|
-
var useThemeConfig = function useThemeConfig(
|
|
140
|
-
var v2 =
|
|
141
|
-
v3 =
|
|
125
|
+
var useThemeConfig = function useThemeConfig(_ref4) {
|
|
126
|
+
var v2 = _ref4.v2,
|
|
127
|
+
v3 = _ref4.v3;
|
|
142
128
|
|
|
143
129
|
var _useTheme = useTheme(),
|
|
144
130
|
_useTheme$theme = _useTheme.theme,
|
|
@@ -153,9 +139,9 @@ var useThemeConfig = function useThemeConfig(_ref5) {
|
|
|
153
139
|
|
|
154
140
|
exports.useThemeConfig = useThemeConfig;
|
|
155
141
|
|
|
156
|
-
var getThemeConfig = function getThemeConfig(props,
|
|
157
|
-
var v2 =
|
|
158
|
-
v3 =
|
|
142
|
+
var getThemeConfig = function getThemeConfig(props, _ref5) {
|
|
143
|
+
var v2 = _ref5.v2,
|
|
144
|
+
v3 = _ref5.v3;
|
|
159
145
|
var _props$theme = props.theme,
|
|
160
146
|
theme = _props$theme === void 0 ? {
|
|
161
147
|
id: "v2"
|
package/dist/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Theme.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/Theme.tsx"],"names":["THEMES","v2","THEME_V2","v3","THEME_V3","Theme","children","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEC,gBADS;AAEbC,EAAAA,EAAE,EAAEC;AAFS,CAAf;AAKA;AACA;AACA;;AACO,IAAMC,KAAyD,GAAG,SAA5DA,KAA4D,OAGnE;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,wBADJC,KACI;AAAA,MADGC,eACH,2BADqBN,gBACrB;AACJ,MAAMK,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIR,MAAM,CAACQ,eAAD,CADV,GAEIA,eAHN;AAKA,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,KAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAMD,K;;AAYb;AACO,IAAMI,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfH,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEJ;AAAtB,KAAiCI,QAAjC,CAAP;AACD,CAFM;;;AAAMG,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfJ,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEF;AAAtB,KAAiCE,QAAjC,CAAP;AACD,CAFM;;;AAAMI,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCZ,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCE,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCQ,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRf,EACQ,SADRA,EACQ;AAAA,MADJE,EACI,SADJA,EACI;AACV,qBAAiCa,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMc,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\n\nconst THEMES = {\n v2: THEME_V2,\n v3: THEME_V3,\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<{ theme?: TTheme | keyof typeof THEMES }> = ({\n children,\n theme: themeOrThemeKey = THEME_V2,\n}) => {\n const theme =\n themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n ? THEMES[themeOrThemeKey]\n : themeOrThemeKey\n\n return <ThemeProvider theme={theme}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n const theme: T = useContext(ThemeContext)\n return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n const { theme = { id: \"v2\" } } = useTheme()\n return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n props: Record<string, any>,\n { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n const { theme = { id: \"v2\" } } = props\n return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}
|
|
@@ -147,8 +147,17 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
147
147
|
|
|
148
148
|
var handleClick = function handleClick(event) {
|
|
149
149
|
if (!panelRef.current || !openDropdownByClick) return;
|
|
150
|
+
var target = event.target;
|
|
151
|
+
var tagName = target.tagName.toLowerCase();
|
|
152
|
+
var isClosableElement = tagName === "a";
|
|
153
|
+
var element = target; // Find parent link element
|
|
154
|
+
|
|
155
|
+
if (!isClosableElement) {
|
|
156
|
+
element = target.closest("a");
|
|
157
|
+
isClosableElement = !!element;
|
|
158
|
+
}
|
|
150
159
|
|
|
151
|
-
if (panelRef.current.contains(
|
|
160
|
+
if (isClosableElement && element && panelRef.current.contains(element)) {
|
|
152
161
|
onHide();
|
|
153
162
|
}
|
|
154
163
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"names":["Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","openDropdownByClick","rest","setVisible","panelRef","current","focus","anchorRef","timeoutRef","onVisible","clearTimeout","setTimeout","onHide","activeRef","onToggleVisibility","position","active","tooltipRef","isFlipped","state","ref","onClickOutside","when","type","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","transition","setTransition","translation","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","visibility","opacity","transform","Container","Box","Panel","FLAT_SHADOW"],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport {\n Position,\n useClickOutside,\n useFocusLock,\n usePosition,\n} from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface DropdownActions {\n /** Call to show dropdown */\n onVisible(): void\n /** Call to hide dropdown */\n onHide(): void\n /** Manipulate visible directly */\n setVisible(value: boolean): void\n /** Pass ref to element you want the dropdown to be anchored to */\n anchorRef: React.MutableRefObject<HTMLElement>\n /** Spread props on element you want the dropdown to be anchored to */\n anchorProps: React.HTMLAttributes<HTMLElement>\n /** Whether or not the dropdown is visible */\n visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n placement?: Position\n /** Intially visible by default? */\n visible?: boolean\n dropdown:\n | React.ReactNode\n | ((\n dropdownActions: Pick<\n DropdownActions,\n \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n >\n ) => void)\n /** Distance in pixels from anchor */\n offset?: number\n /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n keepInDOM?: boolean\n openDropdownByClick?: boolean\n children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n placement = \"top\",\n visible: _visible = false,\n keepInDOM,\n children,\n offset = 10,\n dropdown,\n openDropdownByClick,\n ...rest\n}) => {\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 dropdown and anchor\n useUpdateEffect(() => {\n if (visible && panelRef.current) {\n panelRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const onVisible = () => {\n timeoutRef.current && clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => {\n setVisible(true)\n }, 50)\n }\n\n const onHide = () => {\n timeoutRef.current && clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => {\n if (activeRef.current) return\n setVisible(false)\n }, 150)\n }\n\n const onToggleVisibility = () => {\n if (visible) {\n return onHide()\n }\n\n onVisible()\n }\n\n const {\n anchorRef,\n tooltipRef: panelRef,\n state: { isFlipped },\n } = usePosition({\n position: placement,\n offset: 0,\n active: visible,\n })\n\n useClickOutside({\n ref: panelRef,\n onClickOutside: onHide,\n when: visible,\n type: \"click\",\n })\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onHide()\n }\n }\n\n // Close dropdown when focus leaves element\n const handleKeyUp = (event: KeyboardEvent) => {\n if (!panelRef.current) return\n\n if (\n event.key === \"Tab\" &&\n !(\n panelRef.current === document.activeElement ||\n panelRef.current.contains(document.activeElement)\n )\n ) {\n onHide()\n }\n }\n\n const handleClick = (event: MouseEvent) => {\n if (!panelRef.current || !openDropdownByClick) return\n\n if (panelRef.current.contains(event.target as Element)) {\n onHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeyDown)\n document.addEventListener(\"keyup\", handleKeyUp)\n document.addEventListener(\"click\", handleClick)\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n document.removeEventListener(\"keyup\", handleKeyUp)\n document.removeEventListener(\"click\", handleClick)\n }\n }, [panelRef, openDropdownByClick])\n\n const activeRef = useRef(false)\n\n const handleMouseEnter = () => {\n activeRef.current = true\n }\n\n const handleMouseLeave = () => {\n activeRef.current = false\n onHide()\n }\n\n const [transition, setTransition] = useState(false)\n\n // Wait for next tick so that animation runs\n useEffect(() => {\n setTimeout(() => {\n setTransition(visible)\n }, 0)\n }, [visible])\n\n const translation = useMemo(() => {\n switch (placement) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return `translateY(10px)`\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return `translateY(-10px)`\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return `translateX(10px)`\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return `translateX(-10px)`\n }\n }, [placement])\n\n // Fills offset gap between anchor and panel to prevent mouseout\n const padding = useMemo(() => {\n switch (placement) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n }\n }, [placement, isFlipped, offset])\n\n const anchorProps: React.HTMLAttributes<HTMLElement> = {\n \"aria-expanded\": visible,\n \"aria-haspopup\": true,\n ...(openDropdownByClick\n ? {\n onClick: onToggleVisibility,\n }\n : {\n onMouseEnter: onVisible,\n onMouseLeave: onHide,\n onClick: onVisible,\n }),\n }\n\n const { createPortal } = usePortal()\n\n useFocusLock({ ref: panelRef, active: visible })\n\n return (\n <>\n {children({\n anchorRef: anchorRef as any,\n anchorProps,\n onVisible,\n onHide,\n setVisible,\n visible,\n })}\n\n {(visible || keepInDOM) &&\n createPortal(\n <Container\n aria-label=\"Press escape to close\"\n tabIndex={0}\n ref={panelRef as any}\n zIndex={1}\n display=\"inline-block\"\n placement={placement}\n style={{\n ...(keepInDOM\n ? { visibility: visible ? \"visible\" : \"hidden\" }\n : {}),\n }}\n {...(openDropdownByClick\n ? {}\n : {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n })}\n {...padding}\n {...rest}\n >\n <Panel\n bg=\"white100\"\n border=\"1px solid\"\n borderColor=\"black10\"\n style={\n transition\n ? // In\n { opacity: 1, transform: \"translate(0)\" }\n : // Out\n {\n opacity: 0,\n transform: translation,\n }\n }\n >\n {typeof dropdown === \"function\"\n ? dropdown({ onVisible, onHide, setVisible, visible })\n : dropdown}\n </Panel>\n </Container>\n )}\n </>\n )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n position: fixed;\n text-align: left;\n outline: 0;\n`\n\nconst Panel = styled(Box)`\n transition: opacity 250ms ease-out, transform 250ms ease-out;\n box-shadow: ${FLAT_SHADOW};\n`\n"],"file":"Dropdown.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Dropdown/Dropdown.tsx"],"names":["Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","openDropdownByClick","rest","setVisible","panelRef","current","focus","anchorRef","timeoutRef","onVisible","clearTimeout","setTimeout","onHide","activeRef","onToggleVisibility","position","active","tooltipRef","isFlipped","state","ref","onClickOutside","when","type","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","transition","setTransition","translation","padding","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","visibility","opacity","transform","Container","Box","Panel","FLAT_SHADOW"],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport {\n Position,\n useClickOutside,\n useFocusLock,\n usePosition,\n} from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface DropdownActions {\n /** Call to show dropdown */\n onVisible(): void\n /** Call to hide dropdown */\n onHide(): void\n /** Manipulate visible directly */\n setVisible(value: boolean): void\n /** Pass ref to element you want the dropdown to be anchored to */\n anchorRef: React.MutableRefObject<HTMLElement>\n /** Spread props on element you want the dropdown to be anchored to */\n anchorProps: React.HTMLAttributes<HTMLElement>\n /** Whether or not the dropdown is visible */\n visible: boolean\n}\n\nexport interface DropdownProps extends BoxProps {\n placement?: Position\n /** Intially visible by default? */\n visible?: boolean\n dropdown:\n | React.ReactNode\n | ((\n dropdownActions: Pick<\n DropdownActions,\n \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n >\n ) => void)\n /** Distance in pixels from anchor */\n offset?: number\n /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n keepInDOM?: boolean\n openDropdownByClick?: boolean\n children: (dropdownActions: DropdownActions) => JSX.Element\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown: React.FC<DropdownProps> = ({\n placement = \"top\",\n visible: _visible = false,\n keepInDOM,\n children,\n offset = 10,\n dropdown,\n openDropdownByClick,\n ...rest\n}) => {\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 dropdown and anchor\n useUpdateEffect(() => {\n if (visible && panelRef.current) {\n panelRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const onVisible = () => {\n timeoutRef.current && clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => {\n setVisible(true)\n }, 50)\n }\n\n const onHide = () => {\n timeoutRef.current && clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => {\n if (activeRef.current) return\n setVisible(false)\n }, 150)\n }\n\n const onToggleVisibility = () => {\n if (visible) {\n return onHide()\n }\n\n onVisible()\n }\n\n const {\n anchorRef,\n tooltipRef: panelRef,\n state: { isFlipped },\n } = usePosition({\n position: placement,\n offset: 0,\n active: visible,\n })\n\n useClickOutside({\n ref: panelRef,\n onClickOutside: onHide,\n when: visible,\n type: \"click\",\n })\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onHide()\n }\n }\n\n // Close dropdown when focus leaves element\n const handleKeyUp = (event: KeyboardEvent) => {\n if (!panelRef.current) return\n\n if (\n event.key === \"Tab\" &&\n !(\n panelRef.current === document.activeElement ||\n panelRef.current.contains(document.activeElement)\n )\n ) {\n onHide()\n }\n }\n\n const handleClick = (event: MouseEvent) => {\n if (!panelRef.current || !openDropdownByClick) return\n const target = event.target as Element\n const tagName = target.tagName.toLowerCase()\n let isClosableElement = tagName === \"a\"\n let element: Element | null = target\n\n // Find parent link element\n if (!isClosableElement) {\n element = target.closest(\"a\")\n isClosableElement = !!element\n }\n\n if (isClosableElement && element && panelRef.current.contains(element)) {\n onHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeyDown)\n document.addEventListener(\"keyup\", handleKeyUp)\n document.addEventListener(\"click\", handleClick)\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n document.removeEventListener(\"keyup\", handleKeyUp)\n document.removeEventListener(\"click\", handleClick)\n }\n }, [panelRef, openDropdownByClick])\n\n const activeRef = useRef(false)\n\n const handleMouseEnter = () => {\n activeRef.current = true\n }\n\n const handleMouseLeave = () => {\n activeRef.current = false\n onHide()\n }\n\n const [transition, setTransition] = useState(false)\n\n // Wait for next tick so that animation runs\n useEffect(() => {\n setTimeout(() => {\n setTransition(visible)\n }, 0)\n }, [visible])\n\n const translation = useMemo(() => {\n switch (placement) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return `translateY(10px)`\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return `translateY(-10px)`\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return `translateX(10px)`\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return `translateX(-10px)`\n }\n }, [placement])\n\n // Fills offset gap between anchor and panel to prevent mouseout\n const padding = useMemo(() => {\n switch (placement) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n }\n }, [placement, isFlipped, offset])\n\n const anchorProps: React.HTMLAttributes<HTMLElement> = {\n \"aria-expanded\": visible,\n \"aria-haspopup\": true,\n ...(openDropdownByClick\n ? {\n onClick: onToggleVisibility,\n }\n : {\n onMouseEnter: onVisible,\n onMouseLeave: onHide,\n onClick: onVisible,\n }),\n }\n\n const { createPortal } = usePortal()\n\n useFocusLock({ ref: panelRef, active: visible })\n\n return (\n <>\n {children({\n anchorRef: anchorRef as any,\n anchorProps,\n onVisible,\n onHide,\n setVisible,\n visible,\n })}\n\n {(visible || keepInDOM) &&\n createPortal(\n <Container\n aria-label=\"Press escape to close\"\n tabIndex={0}\n ref={panelRef as any}\n zIndex={1}\n display=\"inline-block\"\n placement={placement}\n style={{\n ...(keepInDOM\n ? { visibility: visible ? \"visible\" : \"hidden\" }\n : {}),\n }}\n {...(openDropdownByClick\n ? {}\n : {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n })}\n {...padding}\n {...rest}\n >\n <Panel\n bg=\"white100\"\n border=\"1px solid\"\n borderColor=\"black10\"\n style={\n transition\n ? // In\n { opacity: 1, transform: \"translate(0)\" }\n : // Out\n {\n opacity: 0,\n transform: translation,\n }\n }\n >\n {typeof dropdown === \"function\"\n ? dropdown({ onVisible, onHide, setVisible, visible })\n : dropdown}\n </Panel>\n </Container>\n )}\n </>\n )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n position: fixed;\n text-align: left;\n outline: 0;\n`\n\nconst Panel = styled(Box)`\n transition: opacity 250ms ease-out, transform 250ms ease-out;\n box-shadow: ${FLAT_SHADOW};\n`\n"],"file":"Dropdown.js"}
|
|
@@ -97,7 +97,7 @@ var Select = function Select(_ref) {
|
|
|
97
97
|
hover: !!hover,
|
|
98
98
|
error: error,
|
|
99
99
|
focus: !!focus,
|
|
100
|
-
mt: title || description ? 0.5 : 0
|
|
100
|
+
mt: variant !== "inline" && (title || description) ? 0.5 : 0
|
|
101
101
|
}, /*#__PURE__*/_react.default.createElement("select", _extends({
|
|
102
102
|
id: id,
|
|
103
103
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAevC;AAAA,MAdJC,WAcI,QAdJA,WAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,KAYI,QAZJA,KAYI;AAAA,MAXJC,KAWI,QAXJA,KAWI;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,EASI,QATJA,EASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,0BAHJC,OAGI;AAAA,MAHJA,OAGI,6BAHM,SAGN;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,uBAAgC,wBAAcA,IAAd,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC;AAAX,KAAsBD,QAAtB,gBACE,6BAAC,UAAD;AACE,IAAA,EAAE,EAAC;AADL,KAEOH,OAAO,KAAK,QAAZ,GACD;AACEK,IAAAA,aAAa,EAAE,KADjB;AAEEC,IAAAA,UAAU,EAAE;AAFd,GADC,GAKD;AACED,IAAAA,aAAa,EAAE,QADjB;AAEEC,IAAAA,UAAU,EAAE;AAFd,GAPN,EAWOZ,EAAE,GAAG;AAAEa,IAAAA,GAAG,EAAEb;AAAP,GAAH,GAAiB,EAX1B,gBAaE,0CACGK,KAAK,iBACJ,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,UAAU,EACRC,OAAO,KAAK,QAAZ,IAAwBX,WAAW,KAAKmB,SAAxC,GACI,CADJ,GAEIA;AALR,KAQGT,KARH,EASGF,QAAQ,iBACP,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,MAAR;AAAe,IAAA,KAAK,EAAC;AAArB,SAVJ,CAFJ,EAmBGR,WAAW,iBACV,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC;AAAzB,KACGA,WADH,CApBJ,CAbF,eAuCE,6BAAC,SAAD;AACE,IAAA,OAAO,EAAEW,OADX;AAEE,IAAA,QAAQ,EAAE,CAAC,CAACV,QAFd;AAGE,IAAA,KAAK,EAAE,CAAC,CAACG,KAHX;AAIE,IAAA,KAAK,EAAEF,KAJT;AAKE,IAAA,KAAK,EAAE,CAAC,CAACC,KALX;AAME,IAAA,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n value: string\n text: string\n}\n\nexport interface SelectProps\n extends BoxProps,\n Omit<React.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n selected?: string\n title?: string\n variant?: Variant\n onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: React.FC<SelectProps> = ({\n description,\n disabled,\n error,\n focus,\n hover,\n id,\n name,\n options,\n required,\n selected,\n title,\n variant = \"default\",\n onSelect,\n ...rest\n}) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n <Flex\n as=\"label\"\n {...(variant === \"inline\"\n ? {\n flexDirection: \"row\",\n alignItems: \"center\",\n }\n : {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n })}\n {...(id ? { for: id } : {})}\n >\n <div>\n {title && (\n <Text\n variant=\"xs\"\n lineHeight={\n variant === \"inline\" && description === undefined\n ? 1\n : undefined\n }\n >\n {title}\n {required && (\n <Box as=\"span\" color=\"brand\">\n *\n </Box>\n )}\n </Text>\n )}\n\n {description && (\n <Text variant=\"xs\" color=\"black60\">\n {description}\n </Text>\n )}\n </div>\n\n <Container\n variant={variant}\n disabled={!!disabled}\n hover={!!hover}\n error={error!}\n focus={!!focus}\n mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n >\n <select\n id={id}\n disabled={disabled}\n name={name}\n value={selected}\n onChange={(event) => {\n onSelect && onSelect(event.target.value)\n }}\n {...selectProps}\n >\n {options.map(({ value, text }) => {\n return (\n <option value={value} key={value}>\n {text}\n </option>\n )\n })}\n </select>\n </Container>\n </Flex>\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n}\n\nconst resetMixin = css`\n appearance: none;\n background: none;\n border: none;\n outline: 0;\n text-indent: 0.01px;\n text-overflow: \"\";\n border-radius: 0;\n\n &:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 black;\n }\n\n option:not(:checked) {\n color: black; /* prevent <option>s from becoming transparent as well */\n }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n &::after {\n content: \"\";\n cursor: inherit;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: ${themeGet(\"space.1\")};\n pointer-events: none;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid\n ${({ disabled }) => {\n return disabled\n ? themeGet(\"colors.black10\")\n : themeGet(\"colors.black100\")\n }};\n }\n`\n\ntype ContainerProps = Required<\n Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n position: relative;\n width: 100%;\n\n > select {\n ${resetMixin};\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 0 24px 0 ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 0;\n border-bottom: 1px solid;\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n ${(props) => {\n return css`\n ${SELECT_STATES.default}\n\n ${props.hover && SELECT_STATES.hover}\n ${props.focus && SELECT_STATES.focus}\n ${props.disabled && SELECT_STATES.disabled}\n ${props.error && SELECT_STATES.error}\n\n &:hover {\n ${SELECT_STATES.hover}\n }\n\n &:focus {\n ${SELECT_STATES.focus}\n }\n\n &:disabled {\n cursor: default;\n ${SELECT_STATES.disabled}\n }\n `\n }};\n }\n\n ${caretMixin}\n`\n"],"file":"Select.js"}
|
package/dist/elements/index.d.ts
CHANGED
package/dist/elements/index.js
CHANGED
|
@@ -329,19 +329,6 @@ Object.keys(_FullBleed).forEach(function (key) {
|
|
|
329
329
|
});
|
|
330
330
|
});
|
|
331
331
|
|
|
332
|
-
var _Grid = require("./Grid");
|
|
333
|
-
|
|
334
|
-
Object.keys(_Grid).forEach(function (key) {
|
|
335
|
-
if (key === "default" || key === "__esModule") return;
|
|
336
|
-
if (key in exports && exports[key] === _Grid[key]) return;
|
|
337
|
-
Object.defineProperty(exports, key, {
|
|
338
|
-
enumerable: true,
|
|
339
|
-
get: function get() {
|
|
340
|
-
return _Grid[key];
|
|
341
|
-
}
|
|
342
|
-
});
|
|
343
|
-
});
|
|
344
|
-
|
|
345
332
|
var _GridColumns = require("./GridColumns");
|
|
346
333
|
|
|
347
334
|
Object.keys(_GridColumns).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./Colors\"\nexport * from \"./CSSGrid\"\nexport * from \"./Dialog\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./FilterSelect\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./Label\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Marquee\"\nexport * from \"./Menu\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./ModalDialog\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressBarTimer\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./Range\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./ShowMore\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./StaticCountdownTimer\"\nexport * from \"./Stepper\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./TimeRemaining\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./Typography\"\nexport * from \"./VisuallyHidden\"\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "24.1.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -123,7 +123,6 @@
|
|
|
123
123
|
"proportional-scale": "^4.0.0",
|
|
124
124
|
"react-lazy-load-image-component": "1.5.0",
|
|
125
125
|
"react-remove-scroll": "2.5.0",
|
|
126
|
-
"styled-bootstrap-grid": "3.1.0",
|
|
127
126
|
"styled-system": "^5.1.5",
|
|
128
127
|
"trunc-html": "^1.1.2",
|
|
129
128
|
"use-cursor": "^1.2.3",
|
|
@@ -177,5 +176,5 @@
|
|
|
177
176
|
"<rootDir>/www/"
|
|
178
177
|
]
|
|
179
178
|
},
|
|
180
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "713868fd5913d67727c95369c35edb726c8b1c97"
|
|
181
180
|
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { BorderProps, ColorProps, FlexProps, MaxWidthProps, SpaceProps, TextAlignProps, WidthProps } from "styled-system";
|
|
2
|
-
/**
|
|
3
|
-
* Outer wrapper when using a grid
|
|
4
|
-
* @deprecated Use `<GridColumns>`
|
|
5
|
-
*/
|
|
6
|
-
export declare const Grid: import("styled-components").StyledComponentClass<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").MaxWidthProperty<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").BorderProperty<import("styled-system").TLengthStyledSystem>>, any, any>;
|
|
7
|
-
/**
|
|
8
|
-
* Grid row
|
|
9
|
-
* @deprecated
|
|
10
|
-
*/
|
|
11
|
-
export declare const Row: import("styled-components").StyledComponentClass<ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, any, any>;
|
|
12
|
-
/**
|
|
13
|
-
* Grid column
|
|
14
|
-
* @deprecated
|
|
15
|
-
*/
|
|
16
|
-
export declare const Col: import("styled-components").StyledComponentClass<ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & FlexProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").FlexProperty<import("styled-system").TLengthStyledSystem>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").WidthProperty<import("styled-system").TLengthStyledSystem>>, any, any>;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Row = exports.Grid = exports.Col = void 0;
|
|
7
|
-
|
|
8
|
-
var _styledBootstrapGrid = require("styled-bootstrap-grid");
|
|
9
|
-
|
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
|
-
var _styledSystem = require("styled-system");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Outer wrapper when using a grid
|
|
18
|
-
* @deprecated Use `<GridColumns>`
|
|
19
|
-
*/
|
|
20
|
-
var Grid = (0, _styledComponents.default)(_styledBootstrapGrid.Container).withConfig({
|
|
21
|
-
displayName: "Grid",
|
|
22
|
-
componentId: "etz25q-0"
|
|
23
|
-
})(["max-width:", "px;", ";"], function (props) {
|
|
24
|
-
return props.theme.grid.breakpoints.xl;
|
|
25
|
-
}, (0, _styledSystem.compose)(_styledSystem.space, _styledSystem.maxWidth, _styledSystem.border));
|
|
26
|
-
/**
|
|
27
|
-
* Grid row
|
|
28
|
-
* @deprecated
|
|
29
|
-
*/
|
|
30
|
-
|
|
31
|
-
exports.Grid = Grid;
|
|
32
|
-
var Row = (0, _styledComponents.default)(_styledBootstrapGrid.Row).withConfig({
|
|
33
|
-
displayName: "Grid__Row",
|
|
34
|
-
componentId: "etz25q-1"
|
|
35
|
-
})(["", ";"], (0, _styledSystem.compose)(_styledSystem.color, _styledSystem.space));
|
|
36
|
-
/**
|
|
37
|
-
* Grid column
|
|
38
|
-
* @deprecated
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
|
-
exports.Row = Row;
|
|
42
|
-
var Col = (0, _styledComponents.default)(_styledBootstrapGrid.Col).withConfig({
|
|
43
|
-
displayName: "Grid__Col",
|
|
44
|
-
componentId: "etz25q-2"
|
|
45
|
-
})(["", ""], (0, _styledSystem.compose)(_styledSystem.color, _styledSystem.flex, _styledSystem.space, _styledSystem.textAlign, _styledSystem.width));
|
|
46
|
-
exports.Col = Col;
|
|
47
|
-
Grid.displayName = "Grid";
|
|
48
|
-
Row.displayName = "Row";
|
|
49
|
-
Col.displayName = "Col";
|
|
50
|
-
//# sourceMappingURL=Grid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Grid/Grid.tsx"],"names":["Grid","_Container","props","theme","grid","breakpoints","xl","space","maxWidth","border","Row","_Row","color","Col","_Col","flex","textAlign","width","displayName"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;;;AAkBA;AACA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,+BAAOC,8BAAP,CAAH;AAAA;AAAA;AAAA,+BAGF,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,IAAZ,CAAiBC,WAAjB,CAA6BC,EAAxC;AAAA,CAHE,EAIb,2BAAQC,mBAAR,EAAeC,sBAAf,EAAyBC,oBAAzB,CAJa,CAAV;AAOP;AACA;AACA;AACA;;;AACO,IAAMC,GAAG,GAAG,+BAAOC,wBAAP,CAAH;AAAA;AAAA;AAAA,cACZ,2BAAQC,mBAAR,EAAeL,mBAAf,CADY,CAAT;AAIP;AACA;AACA;AACA;;;AACO,IAAMM,GAAG,GAAG,+BAAOC,wBAAP,CAAH;AAAA;AAAA;AAAA,aAGZ,2BAAQF,mBAAR,EAAeG,kBAAf,EAAqBR,mBAArB,EAA4BS,uBAA5B,EAAuCC,mBAAvC,CAHY,CAAT;;AAMPjB,IAAI,CAACkB,WAAL,GAAmB,MAAnB;AACAR,GAAG,CAACQ,WAAJ,GAAkB,KAAlB;AACAL,GAAG,CAACK,WAAJ,GAAkB,KAAlB","sourcesContent":["import {\n Col as _Col,\n Container as _Container,\n Row as _Row,\n} from \"styled-bootstrap-grid\"\nimport styled from \"styled-components\"\nimport {\n border,\n BorderProps,\n color,\n ColorProps,\n compose,\n flex,\n FlexProps,\n maxWidth,\n MaxWidthProps,\n space,\n SpaceProps,\n textAlign,\n TextAlignProps,\n width,\n WidthProps,\n} from \"styled-system\"\n\n/**\n * Outer wrapper when using a grid\n * @deprecated Use `<GridColumns>`\n */\nexport const Grid = styled(_Container)<\n SpaceProps & MaxWidthProps & BorderProps\n>`\n max-width: ${(props) => props.theme.grid.breakpoints.xl}px;\n ${compose(space, maxWidth, border)};\n`\n\n/**\n * Grid row\n * @deprecated\n */\nexport const Row = styled(_Row)<ColorProps & SpaceProps>`\n ${compose(color, space)};\n`\n\n/**\n * Grid column\n * @deprecated\n */\nexport const Col = styled(_Col)<\n ColorProps & FlexProps & SpaceProps & TextAlignProps & WidthProps\n>`\n ${compose(color, flex, space, textAlign, width)}\n`\n\nGrid.displayName = \"Grid\"\nRow.displayName = \"Row\"\nCol.displayName = \"Col\"\n"],"file":"Grid.js"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.Basic = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _BorderBox = require("../BorderBox");
|
|
11
|
-
|
|
12
|
-
var _Grid = require("./Grid");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
title: "Components/Grid"
|
|
18
|
-
};
|
|
19
|
-
exports.default = _default;
|
|
20
|
-
|
|
21
|
-
var Basic = function Basic() {
|
|
22
|
-
return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
|
|
23
|
-
border: {
|
|
24
|
-
default: "4px solid pink",
|
|
25
|
-
xs: "4px solid red",
|
|
26
|
-
sm: "4px solid green",
|
|
27
|
-
md: "4px solid gold",
|
|
28
|
-
lg: "4px solid purple",
|
|
29
|
-
xl: "4px solid blue"
|
|
30
|
-
}
|
|
31
|
-
}, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, Array.from(Array(12)).map(function (_, i) {
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_Grid.Col, {
|
|
33
|
-
sm: 1,
|
|
34
|
-
key: i
|
|
35
|
-
}, /*#__PURE__*/_react.default.createElement(_BorderBox.BorderBox, null, i + 1));
|
|
36
|
-
})));
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
exports.Basic = Basic;
|
|
40
|
-
Basic.displayName = "Basic";
|
|
41
|
-
//# sourceMappingURL=Grid.story.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Grid/Grid.story.tsx"],"names":["title","Basic","default","xs","sm","md","lg","xl","Array","from","map","_","i"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;AACzB,sBACE,6BAAC,UAAD;AACE,IAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,gBADH;AAENC,MAAAA,EAAE,EAAE,eAFE;AAGNC,MAAAA,EAAE,EAAE,iBAHE;AAINC,MAAAA,EAAE,EAAE,gBAJE;AAKNC,MAAAA,EAAE,EAAE,kBALE;AAMNC,MAAAA,EAAE,EAAE;AANE;AADV,kBAUE,6BAAC,SAAD,QACGC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAAC,EAAD,CAAhB,EAAsBE,GAAtB,CAA0B,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACnC,wBACE,6BAAC,SAAD;AAAK,MAAA,EAAE,EAAE,CAAT;AAAY,MAAA,GAAG,EAAEA;AAAjB,oBACE,6BAAC,oBAAD,QAAYA,CAAC,GAAG,CAAhB,CADF,CADF;AAKD,GANA,CADH,CAVF,CADF;AAsBD,CAvBM;;;AAAMX,K","sourcesContent":["import React from \"react\"\nimport { BorderBox } from \"../BorderBox\"\nimport { Col, Grid, Row } from \"./Grid\"\n\nexport default {\n title: \"Components/Grid\",\n}\n\nexport const Basic = () => {\n return (\n <Grid\n border={{\n default: \"4px solid pink\",\n xs: \"4px solid red\",\n sm: \"4px solid green\",\n md: \"4px solid gold\",\n lg: \"4px solid purple\",\n xl: \"4px solid blue\",\n }}\n >\n <Row>\n {Array.from(Array(12)).map((_, i) => {\n return (\n <Col sm={1} key={i}>\n <BorderBox>{i + 1}</BorderBox>\n </Col>\n )\n })}\n </Row>\n </Grid>\n )\n}\n"],"file":"Grid.story.js"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Grid";
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _Grid = require("./Grid");
|
|
8
|
-
|
|
9
|
-
Object.keys(_Grid).forEach(function (key) {
|
|
10
|
-
if (key === "default" || key === "__esModule") return;
|
|
11
|
-
if (key in exports && exports[key] === _Grid[key]) return;
|
|
12
|
-
Object.defineProperty(exports, key, {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _Grid[key];
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Grid/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Grid\"\n"],"file":"index.js"}
|