@justfixnyc/component-library 0.25.10 → 0.25.11

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 (9) hide show
  1. package/dist/src/index.d.ts +265 -0
  2. package/dist/src/index.js +295 -0
  3. package/dist/typings/GlobalStyle.d.ts +2 -0
  4. package/dist/typings/buttons/Button.d.ts +12 -0
  5. package/dist/typings/buttons/styles.d.ts +4 -0
  6. package/dist/typings/icons/Icons.d.ts +11 -0
  7. package/dist/typings/index.d.ts +3 -0
  8. package/dist/typings/styles/design-system.d.ts +64 -0
  9. package/package.json +3 -3
package/dist/src/index.d.ts ADDED
@@ -0,0 +1,265 @@
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import styled, { css } from 'styled-components';
6
+
7
+ var BODY_FONT = "\"Degular\", Arial, Helvetica, sans-serif";
8
+ var TITLE_FONT = "\"Degular Display\", Arial, Helvetica, sans-serif";
9
+ var EYEBROW_FONT = "\"Suisse Int'l Mono\", \"Courier New\", Courier, monospace";
10
+ var EYEBROW_MOBILE = css(["font-family:", ";font-style:normal;font-weight:400;font-size:14px;line-height:115%;text-align:center;letter-spacing:0.03em;text-transform:uppercase;"], EYEBROW_FONT);
11
+ var BODY_STANDARD_LINK_MOBILE = css(["font-family:", ";font-style:normal;font-weight:400;font-size:18px;line-height:100%;text-align:center;text-decoration-line:underline;text-underline-position:under;"], BODY_FONT);
12
+ var BODY_STANDARD_MOBILE = css(["font-family:", ";font-style:normal;font-weight:400;font-size:18px;line-height:100%;text-align:center;"], BODY_FONT);
13
+ var JF_COLOR = {
14
+ /** #FAF8F4 */
15
+ OFF_WHITE: '#FAF8F4',
16
+ /** #242323 */
17
+ OFF_BLACK: '#242323',
18
+ /** #4E4B4B */
19
+ GREY_700: '#4E4B4B',
20
+ /** #676565 */
21
+ GREY_600: '#676565',
22
+ /** #9A9898 */
23
+ GREY_400: '#9A9898',
24
+ /** #F2F2F2 */
25
+ GREY_50: '#F2F2F2',
26
+ /** #1AA551 */
27
+ GREEN: '#1AA551',
28
+ /** #FFA0C7 */
29
+ PINK: '#FFA0C7',
30
+ /** #FFBA33 */
31
+ YELLOW: '#FFBA33',
32
+ /** #FF813A */
33
+ ORANGE: '#FF813A',
34
+ /** #5188FF */
35
+ BLUE: '#5188FF',
36
+ /** #D4D5D0 */
37
+ GREY_SHADOW: '#D4D5D0',
38
+ /** #EFE9DC */
39
+ GREY_BORDER: '#EFE9DC',
40
+ /** #EBECE8 */
41
+ GREY_DISABLED: '#EBECE8'
42
+ };
43
+
44
+ // Assumes root font size of 16px
45
+ // TODO: WOW uses 10px, need to sort that out
46
+ var JF_SPACING = {
47
+ /** 0.125rem (2px) */
48
+ _01: '0.125rem',
49
+ /** 0.25rem (4px) */
50
+ _02: '0.25rem',
51
+ /** 0.5rem (8px) */
52
+ _03: '0.5rem',
53
+ /** 0.75rem (12px) */
54
+ _04: '0.75rem',
55
+ /** 1rem (16px) */
56
+ _05: '1rem',
57
+ /** 1.5rem (24px) */
58
+ _06: '1.5rem',
59
+ /** 2rem (32px) */
60
+ _07: '2rem',
61
+ /** 2.5rem (40px) */
62
+ _08: '2.5rem',
63
+ /** 3rem (48px) */
64
+ _09: '3rem',
65
+ /** 4rem (64px) */
66
+ _10: '4rem',
67
+ /** 5rem (80px) */
68
+ _11: '5rem',
69
+ /** 6rem (96px) */
70
+ _12: '6rem',
71
+ /** 10rem (160px) */
72
+ _13: '10rem'
73
+ };
74
+
75
+ var IconLoading = function IconLoading(props) {
76
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
77
+ fill: "currentcolor",
78
+ fillRule: "evenodd",
79
+ clipRule: "evenodd",
80
+ d: "M8.047.424v1.304c0 .566-.856.566-.856 0V.424c0-.565.856-.565.856 0Zm1.223 1.52L9.716.719c.193-.532.997-.24.803.292l-.446 1.225c-.193.532-.997.24-.803-.292Zm1.879.913.838-.999c.363-.433 1.019.117.655.55l-.838.999c-.364.433-1.019-.117-.655-.55Zm1.453 1.501 1.13-.652c.49-.283.917.458.427.741L13.03 5.1c-.49.283-.918-.458-.428-.74Zm.853 1.908 1.284-.227c.557-.098.705.745.148.843l-1.284.226c-.557.098-.705-.744-.148-.842Zm.148 2.084 1.284.226c.557.099.409.941-.149.843l-1.283-.227c-.557-.098-.409-.94.148-.842Zm-.573 2.01 1.129.651c.49.283.062 1.024-.428.74l-1.129-.65c-.49-.284-.062-1.025.428-.742Zm-1.226 1.691.838.999c.364.433-.292.983-.655.55l-.838-.999c-.364-.433.292-.983.655-.55Zm-1.73 1.171.445 1.225c.194.532-.61.824-.803.293l-.446-1.225c-.194-.532.61-.825.803-.293Zm-2.027.508v1.304c0 .566-.856.566-.856 0V13.73c0-.566.856-.566.856 0Zm-3.328.717.446-1.225c.193-.531.997-.239.803.293l-.446 1.225c-.193.531-.997.239-.803-.293ZM.35 8.577l1.284-.227c.557-.098.705.744.148.842L.5 9.42c-.557.098-.705-.744-.148-.843Zm.148-2.538 1.284.227c.557.098.409.94-.148.842L.35 6.882c-.557-.098-.409-.94.148-.843Zm1.008-2.333 1.129.652c.49.283.062 1.024-.428.74l-1.129-.65c-.49-.284-.062-1.025.428-.742ZM3.25 1.86l.838.998c.364.433-.292.983-.655.55l-.838-.999c-.364-.433.292-.983.655-.55ZM5.522.719l.446 1.225c.194.531-.61.824-.803.292l-.446-1.225c-.194-.531.61-.824.803-.292Z"
81
+ }));
82
+ };
83
+ IconLoading.defaultProps = {
84
+ width: "16",
85
+ height: "16",
86
+ fill: "none",
87
+ xmlns: "http://www.w3.org/2000/svg"
88
+ };
89
+ var IconLinkExternal = function IconLinkExternal(props) {
90
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
91
+ fill: "currentcolor",
92
+ d: "M11.99 0h-.008a.571.571 0 0 0 0 1.142h2.055l-9.302 9.302a.571.571 0 0 0 .807.808l9.302-9.302v2.055a.57.57 0 1 0 1.142 0V.664A.57.57 0 0 0 15.422 0H11.99ZM.57 3.425A.571.571 0 0 0 0 3.998v11.418c0 .316.256.571.571.571h11.418a.57.57 0 0 0 .571-.571V6.792a.57.57 0 1 0-1.142 0v.009V6.8v8.044H1.143V4.567H9.227a.57.57 0 1 0 0-1.142H.571Z"
93
+ }));
94
+ };
95
+ IconLinkExternal.defaultProps = {
96
+ width: "16",
97
+ height: "16",
98
+ fill: "none",
99
+ xmlns: "http://www.w3.org/2000/svg"
100
+ };
101
+ var IconCheck = function IconCheck(props) {
102
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
103
+ d: "M1.667 6.333 6.333 11l10-10",
104
+ stroke: "currentcolor",
105
+ strokeWidth: "2",
106
+ strokeLinecap: "round",
107
+ strokeLinejoin: "round"
108
+ }));
109
+ };
110
+ IconCheck.defaultProps = {
111
+ width: "18",
112
+ height: "12",
113
+ fill: "none",
114
+ xmlns: "http://www.w3.org/2000/svg"
115
+ };
116
+ var IconError = function IconError(props) {
117
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
118
+ d: "M10 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8c0 4.389-3.589 8-8 8Zm0-14.651a6.633 6.633 0 0 0-6.629 6.628A6.633 6.633 0 0 0 10 16.606a6.633 6.633 0 0 0 6.629-6.629A6.633 6.633 0 0 0 10 3.35Z",
119
+ fill: "currentcolor"
120
+ }), /*#__PURE__*/React.createElement("path", {
121
+ d: "M10 11.166a.674.674 0 0 1-.686-.686V6.983c0-.389.297-.686.686-.686.389 0 .686.297.686.686v3.497a.673.673 0 0 1-.686.686ZM10 13.68a.623.623 0 0 1-.48-.206.658.658 0 0 1-.206-.48c0-.046 0-.091.023-.137 0-.046.023-.091.046-.137.023-.046.046-.069.068-.114.023-.046.046-.069.092-.115a.705.705 0 0 1 .96 0c.022.023.068.069.091.115.023.045.046.068.069.114.022.046.022.091.045.137 0 .046.023.091.023.137a.623.623 0 0 1-.206.48.805.805 0 0 1-.525.206Z",
122
+ fill: "currentcolor"
123
+ }));
124
+ };
125
+ IconError.defaultProps = {
126
+ width: "20",
127
+ height: "20",
128
+ fill: "none",
129
+ xmlns: "http://www.w3.org/2000/svg"
130
+ };
131
+ var IconChevron = function IconChevron(props) {
132
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
133
+ d: "m1 1 6 6 6-6",
134
+ stroke: "currentcolor"
135
+ }));
136
+ };
137
+ IconChevron.defaultProps = {
138
+ width: "14",
139
+ height: "8",
140
+ fill: "none",
141
+ xmlns: "http://www.w3.org/2000/svg"
142
+ };
143
+ var IconClose = function IconClose(props) {
144
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
145
+ d: "m2 2 12 12M14 2 2 14",
146
+ stroke: "currentcolor",
147
+ strokeWidth: "2",
148
+ strokeLinecap: "square"
149
+ }));
150
+ };
151
+ IconClose.defaultProps = {
152
+ width: "16",
153
+ height: "16",
154
+ fill: "none",
155
+ xmlns: "http://www.w3.org/2000/svg"
156
+ };
157
+ var IconGlobe = function IconGlobe(props) {
158
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
159
+ d: "M10 1.2c4.855 0 8.8 3.945 8.8 8.8s-3.945 8.8-8.8 8.8-8.8-3.945-8.8-8.8S5.145 1.2 10 1.2Zm.4.85V5.8h2.831a9.723 9.723 0 0 0-.6-1.563c-.618-1.246-1.403-2-2.231-2.187Zm-.8 0c-.828.186-1.613.94-2.231 2.188-.23.462-.431.99-.6 1.562H9.6V2.05Zm2.713.294c.39.423.736.943 1.03 1.537.284.572.526 1.219.72 1.919h2.75a8.003 8.003 0 0 0-4.5-3.456Zm-4.625 0a8.002 8.002 0 0 0-4.5 3.456h2.75c.193-.7.435-1.347.718-1.919a6.565 6.565 0 0 1 1.032-1.537ZM17.244 6.6h-2.988c.197.93.314 1.942.338 3h3.394a7.95 7.95 0 0 0-.744-3Zm-3.806 0H10.4v3h3.394a15.473 15.473 0 0 0-.357-3ZM9.6 6.6H6.563c-.206.917-.331 1.932-.357 3H9.6v-3Zm-3.856 0H2.756a7.948 7.948 0 0 0-.744 3h3.394c.024-1.058.14-2.07.338-3Zm12.243 3.8h-3.393c-.024 1.06-.14 2.07-.338 3h2.988c.43-.917.691-1.932.743-3Zm-4.193 0H10.4v3h3.037c.206-.918.332-1.93.357-3Zm-4.194 0H6.206c.025 1.07.15 2.082.357 3H9.6v-3Zm-4.194 0H2.013a7.977 7.977 0 0 0 .743 3h2.988a16.23 16.23 0 0 1-.338-3Zm11.407 3.8h-2.75c-.194.7-.435 1.34-.72 1.913-.294.594-.64 1.125-1.03 1.55a8.013 8.013 0 0 0 4.5-3.463Zm-3.582 0H10.4v3.756c.828-.186 1.613-.947 2.231-2.193.23-.464.431-.988.6-1.563Zm-3.631 0H6.769c.169.575.37 1.099.6 1.563.618 1.246 1.403 2.007 2.231 2.193V14.2Zm-3.662 0h-2.75a8.012 8.012 0 0 0 4.5 3.463c-.39-.425-.737-.956-1.032-1.55a10.791 10.791 0 0 1-.718-1.913Z",
160
+ fill: "currentcolor"
161
+ }));
162
+ };
163
+ IconGlobe.defaultProps = {
164
+ width: "20",
165
+ height: "20",
166
+ fill: "none",
167
+ xmlns: "http://www.w3.org/2000/svg"
168
+ };
169
+ var IconHamburger = function IconHamburger(props) {
170
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
171
+ d: "M0 1h16M0 7h16M0 13h16",
172
+ stroke: "currentcolor",
173
+ strokeWidth: "2"
174
+ }));
175
+ };
176
+ IconHamburger.defaultProps = {
177
+ width: "16",
178
+ height: "14",
179
+ fill: "none",
180
+ xmlns: "http://www.w3.org/2000/svg"
181
+ };
182
+ var IconInternet = function IconInternet(props) {
183
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
184
+ fillRule: "evenodd",
185
+ clipRule: "evenodd",
186
+ d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10ZM5.197 8.258h1.268l.984 4.505.665-7.225h1.17l-.9 8.923H6.872L5.837 9.81l-1.034 4.652H3.277l-.886-8.923h1.17l.651 7.225.985-4.505Zm8.326 0h1.268l.984 4.505.665-7.225h1.17l-.9 8.923h-1.513L14.163 9.81l-1.034 4.652h-1.526l-.886-8.923h1.17l.651 7.225.985-4.505Z",
187
+ fill: "currentcolor"
188
+ }));
189
+ };
190
+ IconInternet.defaultProps = {
191
+ width: "20",
192
+ height: "20",
193
+ fill: "none",
194
+ xmlns: "http://www.w3.org/2000/svg"
195
+ };
196
+ var IconPerson = function IconPerson(props) {
197
+ return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
198
+ d: "M17.14 18.837c0 .639-.519 1.163-1.16 1.163H2.02c-.638 0-1.16-.522-1.16-1.163a8.14 8.14 0 0 1 16.28 0ZM9 12.093a6.745 6.745 0 0 0-6.74 6.512h13.48A6.744 6.744 0 0 0 9 12.093Zm0-2.326A4.884 4.884 0 1 1 9 0a4.884 4.884 0 0 1 0 9.767Zm0-1.395a3.488 3.488 0 1 0 0-6.977 3.488 3.488 0 0 0 0 6.977Z",
199
+ fill: "currentcolor"
200
+ }));
201
+ };
202
+ IconPerson.defaultProps = {
203
+ width: "18",
204
+ height: "20",
205
+ fill: "none",
206
+ xmlns: "http://www.w3.org/2000/svg"
207
+ };
208
+
209
+ var StyledIconLoading = styled(IconLoading).withConfig({
210
+ displayName: "styles__StyledIconLoading",
211
+ componentId: "sc-17d8tll-0"
212
+ })(["margin-right:10px;"]);
213
+ var StyledIconCheck = styled(IconCheck).withConfig({
214
+ displayName: "styles__StyledIconCheck",
215
+ componentId: "sc-17d8tll-1"
216
+ })(["margin-right:10px;"]);
217
+ var variantStyles = function variantStyles(p) {
218
+ if (p.variant === 'text') {
219
+ return css(["color:", ";background:none;border:none;", " ", " &:hover,&:focus,&:active{text-decoration:underline;}&:disabled{cursor:inherit;color:", ";}"], JF_COLOR.OFF_BLACK, p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", BODY_STANDARD_MOBILE, JF_COLOR.GREY_600);
220
+ }
221
+ if (p.loading) {
222
+ return css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;", ";"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n background-color: ").concat(JF_COLOR.GREY_600, ";\n border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n background-color: ").concat(JF_COLOR.OFF_WHITE, ";\n border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", EYEBROW_MOBILE);
223
+ }
224
+ return css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n background-color: ").concat(JF_COLOR.OFF_WHITE, ";\n border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
225
+ };
226
+ var StyledButton = styled.button.withConfig({
227
+ displayName: "styles__StyledButton",
228
+ componentId: "sc-17d8tll-2"
229
+ })(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;flex:none;max-width:100%;white-space:normal;word-wrap:break-word;vertical-align:middle;", ""], variantStyles);
230
+
231
+ var _excluded = ["children", "variant", "size", "loading", "hasIcon"];
232
+ /**
233
+ * Accepts all `ButtonHTMLAttributes`
234
+ */
235
+ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
236
+ var children = _ref.children,
237
+ variant = _ref.variant,
238
+ size = _ref.size,
239
+ loading = _ref.loading,
240
+ hasIcon = _ref.hasIcon,
241
+ props = _objectWithoutProperties(_ref, _excluded);
242
+ return /*#__PURE__*/React.createElement(StyledButton, _extends({
243
+ ref: ref,
244
+ variant: variant,
245
+ size: size,
246
+ hasIcon: !loading && hasIcon,
247
+ loading: loading,
248
+ type: "button"
249
+ }, props), loading && variant != 'text' ? /*#__PURE__*/React.createElement(StyledIconLoading, null) : null, !loading && hasIcon ? /*#__PURE__*/React.createElement(StyledIconCheck, null) : null, children);
250
+ });
251
+ Button.displayName = 'Button';
252
+ Button.propTypes = {
253
+ variant: PropTypes.oneOf(['primary', 'secondary', 'text']),
254
+ size: PropTypes.oneOf(['small', 'large']),
255
+ loading: PropTypes.bool,
256
+ hasIcon: PropTypes.bool
257
+ };
258
+ Button.defaultProps = {
259
+ variant: 'primary',
260
+ size: 'large',
261
+ loading: false,
262
+ hasIcon: false
263
+ };
264
+
265
+ export { BODY_FONT, BODY_STANDARD_LINK_MOBILE, BODY_STANDARD_MOBILE, Button, EYEBROW_FONT, EYEBROW_MOBILE, IconCheck, IconChevron, IconClose, IconError, IconGlobe, IconHamburger, IconInternet, IconLinkExternal, IconLoading, IconPerson, JF_COLOR, JF_SPACING, TITLE_FONT };
package/dist/src/index.js ADDED
@@ -0,0 +1,295 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _extends = require('@babel/runtime/helpers/extends');
6
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
+ var React = require('react');
8
+ var PropTypes = require('prop-types');
9
+ var styled = require('styled-components');
10
+
11
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
+
13
+ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
14
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
17
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
18
+
19
+ var BODY_FONT = "\"Degular\", Arial, Helvetica, sans-serif";
20
+ var TITLE_FONT = "\"Degular Display\", Arial, Helvetica, sans-serif";
21
+ var EYEBROW_FONT = "\"Suisse Int'l Mono\", \"Courier New\", Courier, monospace";
22
+ var EYEBROW_MOBILE = styled.css(["font-family:", ";font-style:normal;font-weight:400;font-size:14px;line-height:115%;text-align:center;letter-spacing:0.03em;text-transform:uppercase;"], EYEBROW_FONT);
23
+ var BODY_STANDARD_LINK_MOBILE = styled.css(["font-family:", ";font-style:normal;font-weight:400;font-size:18px;line-height:100%;text-align:center;text-decoration-line:underline;text-underline-position:under;"], BODY_FONT);
24
+ var BODY_STANDARD_MOBILE = styled.css(["font-family:", ";font-style:normal;font-weight:400;font-size:18px;line-height:100%;text-align:center;"], BODY_FONT);
25
+ var JF_COLOR = {
26
+ /** #FAF8F4 */
27
+ OFF_WHITE: '#FAF8F4',
28
+ /** #242323 */
29
+ OFF_BLACK: '#242323',
30
+ /** #4E4B4B */
31
+ GREY_700: '#4E4B4B',
32
+ /** #676565 */
33
+ GREY_600: '#676565',
34
+ /** #9A9898 */
35
+ GREY_400: '#9A9898',
36
+ /** #F2F2F2 */
37
+ GREY_50: '#F2F2F2',
38
+ /** #1AA551 */
39
+ GREEN: '#1AA551',
40
+ /** #FFA0C7 */
41
+ PINK: '#FFA0C7',
42
+ /** #FFBA33 */
43
+ YELLOW: '#FFBA33',
44
+ /** #FF813A */
45
+ ORANGE: '#FF813A',
46
+ /** #5188FF */
47
+ BLUE: '#5188FF',
48
+ /** #D4D5D0 */
49
+ GREY_SHADOW: '#D4D5D0',
50
+ /** #EFE9DC */
51
+ GREY_BORDER: '#EFE9DC',
52
+ /** #EBECE8 */
53
+ GREY_DISABLED: '#EBECE8'
54
+ };
55
+
56
+ // Assumes root font size of 16px
57
+ // TODO: WOW uses 10px, need to sort that out
58
+ var JF_SPACING = {
59
+ /** 0.125rem (2px) */
60
+ _01: '0.125rem',
61
+ /** 0.25rem (4px) */
62
+ _02: '0.25rem',
63
+ /** 0.5rem (8px) */
64
+ _03: '0.5rem',
65
+ /** 0.75rem (12px) */
66
+ _04: '0.75rem',
67
+ /** 1rem (16px) */
68
+ _05: '1rem',
69
+ /** 1.5rem (24px) */
70
+ _06: '1.5rem',
71
+ /** 2rem (32px) */
72
+ _07: '2rem',
73
+ /** 2.5rem (40px) */
74
+ _08: '2.5rem',
75
+ /** 3rem (48px) */
76
+ _09: '3rem',
77
+ /** 4rem (64px) */
78
+ _10: '4rem',
79
+ /** 5rem (80px) */
80
+ _11: '5rem',
81
+ /** 6rem (96px) */
82
+ _12: '6rem',
83
+ /** 10rem (160px) */
84
+ _13: '10rem'
85
+ };
86
+
87
+ var IconLoading = function IconLoading(props) {
88
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
89
+ fill: "currentcolor",
90
+ fillRule: "evenodd",
91
+ clipRule: "evenodd",
92
+ d: "M8.047.424v1.304c0 .566-.856.566-.856 0V.424c0-.565.856-.565.856 0Zm1.223 1.52L9.716.719c.193-.532.997-.24.803.292l-.446 1.225c-.193.532-.997.24-.803-.292Zm1.879.913.838-.999c.363-.433 1.019.117.655.55l-.838.999c-.364.433-1.019-.117-.655-.55Zm1.453 1.501 1.13-.652c.49-.283.917.458.427.741L13.03 5.1c-.49.283-.918-.458-.428-.74Zm.853 1.908 1.284-.227c.557-.098.705.745.148.843l-1.284.226c-.557.098-.705-.744-.148-.842Zm.148 2.084 1.284.226c.557.099.409.941-.149.843l-1.283-.227c-.557-.098-.409-.94.148-.842Zm-.573 2.01 1.129.651c.49.283.062 1.024-.428.74l-1.129-.65c-.49-.284-.062-1.025.428-.742Zm-1.226 1.691.838.999c.364.433-.292.983-.655.55l-.838-.999c-.364-.433.292-.983.655-.55Zm-1.73 1.171.445 1.225c.194.532-.61.824-.803.293l-.446-1.225c-.194-.532.61-.825.803-.293Zm-2.027.508v1.304c0 .566-.856.566-.856 0V13.73c0-.566.856-.566.856 0Zm-3.328.717.446-1.225c.193-.531.997-.239.803.293l-.446 1.225c-.193.531-.997.239-.803-.293ZM.35 8.577l1.284-.227c.557-.098.705.744.148.842L.5 9.42c-.557.098-.705-.744-.148-.843Zm.148-2.538 1.284.227c.557.098.409.94-.148.842L.35 6.882c-.557-.098-.409-.94.148-.843Zm1.008-2.333 1.129.652c.49.283.062 1.024-.428.74l-1.129-.65c-.49-.284-.062-1.025.428-.742ZM3.25 1.86l.838.998c.364.433-.292.983-.655.55l-.838-.999c-.364-.433.292-.983.655-.55ZM5.522.719l.446 1.225c.194.531-.61.824-.803.292l-.446-1.225c-.194-.531.61-.824.803-.292Z"
93
+ }));
94
+ };
95
+ IconLoading.defaultProps = {
96
+ width: "16",
97
+ height: "16",
98
+ fill: "none",
99
+ xmlns: "http://www.w3.org/2000/svg"
100
+ };
101
+ var IconLinkExternal = function IconLinkExternal(props) {
102
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
103
+ fill: "currentcolor",
104
+ d: "M11.99 0h-.008a.571.571 0 0 0 0 1.142h2.055l-9.302 9.302a.571.571 0 0 0 .807.808l9.302-9.302v2.055a.57.57 0 1 0 1.142 0V.664A.57.57 0 0 0 15.422 0H11.99ZM.57 3.425A.571.571 0 0 0 0 3.998v11.418c0 .316.256.571.571.571h11.418a.57.57 0 0 0 .571-.571V6.792a.57.57 0 1 0-1.142 0v.009V6.8v8.044H1.143V4.567H9.227a.57.57 0 1 0 0-1.142H.571Z"
105
+ }));
106
+ };
107
+ IconLinkExternal.defaultProps = {
108
+ width: "16",
109
+ height: "16",
110
+ fill: "none",
111
+ xmlns: "http://www.w3.org/2000/svg"
112
+ };
113
+ var IconCheck = function IconCheck(props) {
114
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
115
+ d: "M1.667 6.333 6.333 11l10-10",
116
+ stroke: "currentcolor",
117
+ strokeWidth: "2",
118
+ strokeLinecap: "round",
119
+ strokeLinejoin: "round"
120
+ }));
121
+ };
122
+ IconCheck.defaultProps = {
123
+ width: "18",
124
+ height: "12",
125
+ fill: "none",
126
+ xmlns: "http://www.w3.org/2000/svg"
127
+ };
128
+ var IconError = function IconError(props) {
129
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
130
+ d: "M10 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8c0 4.389-3.589 8-8 8Zm0-14.651a6.633 6.633 0 0 0-6.629 6.628A6.633 6.633 0 0 0 10 16.606a6.633 6.633 0 0 0 6.629-6.629A6.633 6.633 0 0 0 10 3.35Z",
131
+ fill: "currentcolor"
132
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
133
+ d: "M10 11.166a.674.674 0 0 1-.686-.686V6.983c0-.389.297-.686.686-.686.389 0 .686.297.686.686v3.497a.673.673 0 0 1-.686.686ZM10 13.68a.623.623 0 0 1-.48-.206.658.658 0 0 1-.206-.48c0-.046 0-.091.023-.137 0-.046.023-.091.046-.137.023-.046.046-.069.068-.114.023-.046.046-.069.092-.115a.705.705 0 0 1 .96 0c.022.023.068.069.091.115.023.045.046.068.069.114.022.046.022.091.045.137 0 .046.023.091.023.137a.623.623 0 0 1-.206.48.805.805 0 0 1-.525.206Z",
134
+ fill: "currentcolor"
135
+ }));
136
+ };
137
+ IconError.defaultProps = {
138
+ width: "20",
139
+ height: "20",
140
+ fill: "none",
141
+ xmlns: "http://www.w3.org/2000/svg"
142
+ };
143
+ var IconChevron = function IconChevron(props) {
144
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
145
+ d: "m1 1 6 6 6-6",
146
+ stroke: "currentcolor"
147
+ }));
148
+ };
149
+ IconChevron.defaultProps = {
150
+ width: "14",
151
+ height: "8",
152
+ fill: "none",
153
+ xmlns: "http://www.w3.org/2000/svg"
154
+ };
155
+ var IconClose = function IconClose(props) {
156
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
157
+ d: "m2 2 12 12M14 2 2 14",
158
+ stroke: "currentcolor",
159
+ strokeWidth: "2",
160
+ strokeLinecap: "square"
161
+ }));
162
+ };
163
+ IconClose.defaultProps = {
164
+ width: "16",
165
+ height: "16",
166
+ fill: "none",
167
+ xmlns: "http://www.w3.org/2000/svg"
168
+ };
169
+ var IconGlobe = function IconGlobe(props) {
170
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
171
+ d: "M10 1.2c4.855 0 8.8 3.945 8.8 8.8s-3.945 8.8-8.8 8.8-8.8-3.945-8.8-8.8S5.145 1.2 10 1.2Zm.4.85V5.8h2.831a9.723 9.723 0 0 0-.6-1.563c-.618-1.246-1.403-2-2.231-2.187Zm-.8 0c-.828.186-1.613.94-2.231 2.188-.23.462-.431.99-.6 1.562H9.6V2.05Zm2.713.294c.39.423.736.943 1.03 1.537.284.572.526 1.219.72 1.919h2.75a8.003 8.003 0 0 0-4.5-3.456Zm-4.625 0a8.002 8.002 0 0 0-4.5 3.456h2.75c.193-.7.435-1.347.718-1.919a6.565 6.565 0 0 1 1.032-1.537ZM17.244 6.6h-2.988c.197.93.314 1.942.338 3h3.394a7.95 7.95 0 0 0-.744-3Zm-3.806 0H10.4v3h3.394a15.473 15.473 0 0 0-.357-3ZM9.6 6.6H6.563c-.206.917-.331 1.932-.357 3H9.6v-3Zm-3.856 0H2.756a7.948 7.948 0 0 0-.744 3h3.394c.024-1.058.14-2.07.338-3Zm12.243 3.8h-3.393c-.024 1.06-.14 2.07-.338 3h2.988c.43-.917.691-1.932.743-3Zm-4.193 0H10.4v3h3.037c.206-.918.332-1.93.357-3Zm-4.194 0H6.206c.025 1.07.15 2.082.357 3H9.6v-3Zm-4.194 0H2.013a7.977 7.977 0 0 0 .743 3h2.988a16.23 16.23 0 0 1-.338-3Zm11.407 3.8h-2.75c-.194.7-.435 1.34-.72 1.913-.294.594-.64 1.125-1.03 1.55a8.013 8.013 0 0 0 4.5-3.463Zm-3.582 0H10.4v3.756c.828-.186 1.613-.947 2.231-2.193.23-.464.431-.988.6-1.563Zm-3.631 0H6.769c.169.575.37 1.099.6 1.563.618 1.246 1.403 2.007 2.231 2.193V14.2Zm-3.662 0h-2.75a8.012 8.012 0 0 0 4.5 3.463c-.39-.425-.737-.956-1.032-1.55a10.791 10.791 0 0 1-.718-1.913Z",
172
+ fill: "currentcolor"
173
+ }));
174
+ };
175
+ IconGlobe.defaultProps = {
176
+ width: "20",
177
+ height: "20",
178
+ fill: "none",
179
+ xmlns: "http://www.w3.org/2000/svg"
180
+ };
181
+ var IconHamburger = function IconHamburger(props) {
182
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
183
+ d: "M0 1h16M0 7h16M0 13h16",
184
+ stroke: "currentcolor",
185
+ strokeWidth: "2"
186
+ }));
187
+ };
188
+ IconHamburger.defaultProps = {
189
+ width: "16",
190
+ height: "14",
191
+ fill: "none",
192
+ xmlns: "http://www.w3.org/2000/svg"
193
+ };
194
+ var IconInternet = function IconInternet(props) {
195
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
196
+ fillRule: "evenodd",
197
+ clipRule: "evenodd",
198
+ d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10ZM5.197 8.258h1.268l.984 4.505.665-7.225h1.17l-.9 8.923H6.872L5.837 9.81l-1.034 4.652H3.277l-.886-8.923h1.17l.651 7.225.985-4.505Zm8.326 0h1.268l.984 4.505.665-7.225h1.17l-.9 8.923h-1.513L14.163 9.81l-1.034 4.652h-1.526l-.886-8.923h1.17l.651 7.225.985-4.505Z",
199
+ fill: "currentcolor"
200
+ }));
201
+ };
202
+ IconInternet.defaultProps = {
203
+ width: "20",
204
+ height: "20",
205
+ fill: "none",
206
+ xmlns: "http://www.w3.org/2000/svg"
207
+ };
208
+ var IconPerson = function IconPerson(props) {
209
+ return /*#__PURE__*/React__default["default"].createElement("svg", props, /*#__PURE__*/React__default["default"].createElement("path", {
210
+ d: "M17.14 18.837c0 .639-.519 1.163-1.16 1.163H2.02c-.638 0-1.16-.522-1.16-1.163a8.14 8.14 0 0 1 16.28 0ZM9 12.093a6.745 6.745 0 0 0-6.74 6.512h13.48A6.744 6.744 0 0 0 9 12.093Zm0-2.326A4.884 4.884 0 1 1 9 0a4.884 4.884 0 0 1 0 9.767Zm0-1.395a3.488 3.488 0 1 0 0-6.977 3.488 3.488 0 0 0 0 6.977Z",
211
+ fill: "currentcolor"
212
+ }));
213
+ };
214
+ IconPerson.defaultProps = {
215
+ width: "18",
216
+ height: "20",
217
+ fill: "none",
218
+ xmlns: "http://www.w3.org/2000/svg"
219
+ };
220
+
221
+ var StyledIconLoading = styled__default["default"](IconLoading).withConfig({
222
+ displayName: "styles__StyledIconLoading",
223
+ componentId: "sc-17d8tll-0"
224
+ })(["margin-right:10px;"]);
225
+ var StyledIconCheck = styled__default["default"](IconCheck).withConfig({
226
+ displayName: "styles__StyledIconCheck",
227
+ componentId: "sc-17d8tll-1"
228
+ })(["margin-right:10px;"]);
229
+ var variantStyles = function variantStyles(p) {
230
+ if (p.variant === 'text') {
231
+ return styled.css(["color:", ";background:none;border:none;", " ", " &:hover,&:focus,&:active{text-decoration:underline;}&:disabled{cursor:inherit;color:", ";}"], JF_COLOR.OFF_BLACK, p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", BODY_STANDARD_MOBILE, JF_COLOR.GREY_600);
232
+ }
233
+ if (p.loading) {
234
+ return styled.css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;", ";"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n background-color: ").concat(JF_COLOR.GREY_600, ";\n border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n background-color: ").concat(JF_COLOR.OFF_WHITE, ";\n border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", EYEBROW_MOBILE);
235
+ }
236
+ return styled.css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n background-color: ").concat(JF_COLOR.OFF_WHITE, ";\n border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
237
+ };
238
+ var StyledButton = styled__default["default"].button.withConfig({
239
+ displayName: "styles__StyledButton",
240
+ componentId: "sc-17d8tll-2"
241
+ })(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;flex:none;max-width:100%;white-space:normal;word-wrap:break-word;vertical-align:middle;", ""], variantStyles);
242
+
243
+ var _excluded = ["children", "variant", "size", "loading", "hasIcon"];
244
+ /**
245
+ * Accepts all `ButtonHTMLAttributes`
246
+ */
247
+ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
248
+ var children = _ref.children,
249
+ variant = _ref.variant,
250
+ size = _ref.size,
251
+ loading = _ref.loading,
252
+ hasIcon = _ref.hasIcon,
253
+ props = _objectWithoutProperties__default["default"](_ref, _excluded);
254
+ return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends__default["default"]({
255
+ ref: ref,
256
+ variant: variant,
257
+ size: size,
258
+ hasIcon: !loading && hasIcon,
259
+ loading: loading,
260
+ type: "button"
261
+ }, props), loading && variant != 'text' ? /*#__PURE__*/React__default["default"].createElement(StyledIconLoading, null) : null, !loading && hasIcon ? /*#__PURE__*/React__default["default"].createElement(StyledIconCheck, null) : null, children);
262
+ });
263
+ Button.displayName = 'Button';
264
+ Button.propTypes = {
265
+ variant: PropTypes__default["default"].oneOf(['primary', 'secondary', 'text']),
266
+ size: PropTypes__default["default"].oneOf(['small', 'large']),
267
+ loading: PropTypes__default["default"].bool,
268
+ hasIcon: PropTypes__default["default"].bool
269
+ };
270
+ Button.defaultProps = {
271
+ variant: 'primary',
272
+ size: 'large',
273
+ loading: false,
274
+ hasIcon: false
275
+ };
276
+
277
+ exports.BODY_FONT = BODY_FONT;
278
+ exports.BODY_STANDARD_LINK_MOBILE = BODY_STANDARD_LINK_MOBILE;
279
+ exports.BODY_STANDARD_MOBILE = BODY_STANDARD_MOBILE;
280
+ exports.Button = Button;
281
+ exports.EYEBROW_FONT = EYEBROW_FONT;
282
+ exports.EYEBROW_MOBILE = EYEBROW_MOBILE;
283
+ exports.IconCheck = IconCheck;
284
+ exports.IconChevron = IconChevron;
285
+ exports.IconClose = IconClose;
286
+ exports.IconError = IconError;
287
+ exports.IconGlobe = IconGlobe;
288
+ exports.IconHamburger = IconHamburger;
289
+ exports.IconInternet = IconInternet;
290
+ exports.IconLinkExternal = IconLinkExternal;
291
+ exports.IconLoading = IconLoading;
292
+ exports.IconPerson = IconPerson;
293
+ exports.JF_COLOR = JF_COLOR;
294
+ exports.JF_SPACING = JF_SPACING;
295
+ exports.TITLE_FONT = TITLE_FONT;
package/dist/typings/GlobalStyle.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
2
+ export default GlobalStyle;
package/dist/typings/buttons/Button.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
3
+ children: React.ReactNode;
4
+ variant?: 'primary' | 'secondary' | 'text';
5
+ size?: 'small' | 'large';
6
+ loading?: boolean;
7
+ hasIcon?: boolean;
8
+ }
9
+ /**
10
+ * Accepts all `ButtonHTMLAttributes`
11
+ */
12
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
package/dist/typings/buttons/styles.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ButtonProps } from './Button';
2
+ export declare const StyledIconLoading: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
3
+ export declare const StyledIconCheck: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
4
+ export declare const StyledButton: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
package/dist/typings/icons/Icons.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import IconLoading from './Loading.svg';
2
+ import IconLinkExternal from './LinkExternal.svg';
3
+ import IconCheck from './Check.svg';
4
+ import IconError from './Error.svg';
5
+ import IconChevron from './Chevron.svg';
6
+ import IconClose from './Close.svg';
7
+ import IconGlobe from './Globe.svg';
8
+ import IconHamburger from './Hamburger.svg';
9
+ import IconInternet from './Internet.svg';
10
+ import IconPerson from './Person.svg';
11
+ export { IconLoading, IconLinkExternal, IconCheck, IconError, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, };
package/dist/typings/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './buttons/Button';
2
+ export * from './icons/Icons';
3
+ export * from './styles/design-system';
package/dist/typings/styles/design-system.d.ts ADDED
@@ -0,0 +1,64 @@
1
+ export declare const BODY_FONT = "\"Degular\", Arial, Helvetica, sans-serif";
2
+ export declare const TITLE_FONT = "\"Degular Display\", Arial, Helvetica, sans-serif";
3
+ export declare const EYEBROW_FONT = "\"Suisse Int'l Mono\", \"Courier New\", Courier, monospace";
4
+ export declare const EYEBROW_MOBILE: import("styled-components").FlattenSimpleInterpolation;
5
+ export declare const BODY_STANDARD_LINK_MOBILE: import("styled-components").FlattenSimpleInterpolation;
6
+ export declare const BODY_STANDARD_MOBILE: import("styled-components").FlattenSimpleInterpolation;
7
+ export declare const JF_COLOR: {
8
+ /** #FAF8F4 */
9
+ OFF_WHITE: string;
10
+ /** #242323 */
11
+ OFF_BLACK: string;
12
+ /** #4E4B4B */
13
+ GREY_700: string;
14
+ /** #676565 */
15
+ GREY_600: string;
16
+ /** #9A9898 */
17
+ GREY_400: string;
18
+ /** #F2F2F2 */
19
+ GREY_50: string;
20
+ /** #1AA551 */
21
+ GREEN: string;
22
+ /** #FFA0C7 */
23
+ PINK: string;
24
+ /** #FFBA33 */
25
+ YELLOW: string;
26
+ /** #FF813A */
27
+ ORANGE: string;
28
+ /** #5188FF */
29
+ BLUE: string;
30
+ /** #D4D5D0 */
31
+ GREY_SHADOW: string;
32
+ /** #EFE9DC */
33
+ GREY_BORDER: string;
34
+ /** #EBECE8 */
35
+ GREY_DISABLED: string;
36
+ };
37
+ export declare const JF_SPACING: {
38
+ /** 0.125rem (2px) */
39
+ _01: string;
40
+ /** 0.25rem (4px) */
41
+ _02: string;
42
+ /** 0.5rem (8px) */
43
+ _03: string;
44
+ /** 0.75rem (12px) */
45
+ _04: string;
46
+ /** 1rem (16px) */
47
+ _05: string;
48
+ /** 1.5rem (24px) */
49
+ _06: string;
50
+ /** 2rem (32px) */
51
+ _07: string;
52
+ /** 2.5rem (40px) */
53
+ _08: string;
54
+ /** 3rem (48px) */
55
+ _09: string;
56
+ /** 4rem (64px) */
57
+ _10: string;
58
+ /** 5rem (80px) */
59
+ _11: string;
60
+ /** 6rem (96px) */
61
+ _12: string;
62
+ /** 10rem (160px) */
63
+ _13: string;
64
+ };
package/package.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@justfixnyc/component-library",
3
3
  "description": "JustFix Component Library",
4
4
  "license": "MIT",
5
- "version": "0.25.10",
6
- "main": "dist/index.cjs.js",
7
- "module": "dist/index.esm.js",
5
+ "version": "0.25.11",
6
+ "main": "dist/src/index.js",
7
+ "module": "dist/src/index.d.ts",
8
8
  "files": [
9
9
  "dist"
10
10
  ],