@charcoal-ui/react-sandbox 2.0.0-alpha.10 → 2.0.0-alpha.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.
- package/dist/index.cjs +55 -118
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.modern.js +146 -224
- package/dist/index.modern.js.map +1 -1
- package/dist/index.module.js +58 -119
- package/dist/index.module.js.map +1 -1
- package/package.json +6 -6
- package/src/index.ts +0 -1
- package/dist/components/Spinner/index.d.ts +0 -15
- package/dist/components/Spinner/index.d.ts.map +0 -1
- package/dist/components/Spinner/index.story.d.ts +0 -10
- package/dist/components/Spinner/index.story.d.ts.map +0 -1
- package/src/components/Spinner/index.story.tsx +0 -47
- package/src/components/Spinner/index.tsx +0 -86
package/dist/index.cjs
CHANGED
|
@@ -7,7 +7,6 @@ var foundation = require('@charcoal-ui/foundation');
|
|
|
7
7
|
var ReactDOM = require('react-dom');
|
|
8
8
|
var reactSpring = require('react-spring');
|
|
9
9
|
var warning = require('warning');
|
|
10
|
-
var polished = require('polished');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
@@ -58,7 +57,7 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
58
57
|
return strings;
|
|
59
58
|
}
|
|
60
59
|
|
|
61
|
-
var _templateObject$
|
|
60
|
+
var _templateObject$e, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5;
|
|
62
61
|
|
|
63
62
|
var _excluded$3 = ["onClick", "children", "active", "hover", "reactive"];
|
|
64
63
|
var FilterButton = React__default["default"].forwardRef(function FilterButton(_ref, ref) {
|
|
@@ -127,7 +126,7 @@ var FilterLink = React__default["default"].forwardRef(function FilterLink(_ref3,
|
|
|
127
126
|
}, children));
|
|
128
127
|
}
|
|
129
128
|
});
|
|
130
|
-
var buttonCss = styled.css(_templateObject$
|
|
129
|
+
var buttonCss = styled.css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: block;\n outline: none;\n border: none;\n padding: 9px 24px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n border-radius: /* absurd radius, but ensures rounded corners */ 2000px;\n transition: color 0.2s;\n color: ", ";\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n\n &:hover {\n color: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n @media ", " {\n padding: 5px 16px;\n }\n"])), function (_ref4) {
|
|
131
130
|
var theme = _ref4.theme;
|
|
132
131
|
return theme.color.text3;
|
|
133
132
|
}, function (_ref5) {
|
|
@@ -136,14 +135,14 @@ var buttonCss = styled.css(_templateObject$f || (_templateObject$f = _taggedTemp
|
|
|
136
135
|
}, function (_ref6) {
|
|
137
136
|
var _ref6$hover = _ref6.hover,
|
|
138
137
|
hover = _ref6$hover === void 0 ? false : _ref6$hover;
|
|
139
|
-
return hover && styled.css(_templateObject2$
|
|
138
|
+
return hover && styled.css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n color: ", ";\n "])), function (_ref7) {
|
|
140
139
|
var theme = _ref7.theme;
|
|
141
140
|
return theme.color.text2;
|
|
142
141
|
});
|
|
143
142
|
}, function (_ref8) {
|
|
144
143
|
var _ref8$active = _ref8.active,
|
|
145
144
|
active = _ref8$active === void 0 ? false : _ref8$active;
|
|
146
|
-
return active && styled.css(_templateObject3$
|
|
145
|
+
return active && styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n "])), function (_ref9) {
|
|
147
146
|
var theme = _ref9.theme;
|
|
148
147
|
return theme.color.surface3;
|
|
149
148
|
}, function (_ref10) {
|
|
@@ -175,7 +174,7 @@ var Filter = styled__default["default"].div(_templateObject9$5 || (_templateObje
|
|
|
175
174
|
|
|
176
175
|
var theme = styled$1.createTheme(styled__default["default"]);
|
|
177
176
|
|
|
178
|
-
var _templateObject$
|
|
177
|
+
var _templateObject$d;
|
|
179
178
|
function IconBase(_ref) {
|
|
180
179
|
var _ref$size = _ref.size,
|
|
181
180
|
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
@@ -185,7 +184,7 @@ function IconBase(_ref) {
|
|
|
185
184
|
transform = _ref.transform,
|
|
186
185
|
fillRule = _ref.fillRule,
|
|
187
186
|
clipRule = _ref.clipRule;
|
|
188
|
-
return /*#__PURE__*/React__default["default"].createElement(Icon$
|
|
187
|
+
return /*#__PURE__*/React__default["default"].createElement(Icon$2, {
|
|
189
188
|
viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize,
|
|
190
189
|
size: size,
|
|
191
190
|
currentColor: currentColor
|
|
@@ -196,7 +195,7 @@ function IconBase(_ref) {
|
|
|
196
195
|
clipRule: clipRule
|
|
197
196
|
}));
|
|
198
197
|
}
|
|
199
|
-
var Icon$
|
|
198
|
+
var Icon$2 = styled__default["default"].svg(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n stroke: none;\n fill: ", ";\n width: ", "px;\n height: ", "px;\n line-height: 0;\n font-size: 0;\n vertical-align: middle;\n"])), function (_ref2) {
|
|
200
199
|
var _ref2$currentColor = _ref2.currentColor,
|
|
201
200
|
currentColor = _ref2$currentColor === void 0 ? false : _ref2$currentColor,
|
|
202
201
|
theme = _ref2.theme;
|
|
@@ -225,7 +224,7 @@ var IconBasePath = function IconBasePath(_ref3) {
|
|
|
225
224
|
}
|
|
226
225
|
};
|
|
227
226
|
|
|
228
|
-
var _templateObject$
|
|
227
|
+
var _templateObject$c;
|
|
229
228
|
var size$1 = 16;
|
|
230
229
|
function InfoIcon() {
|
|
231
230
|
var path = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
@@ -240,12 +239,12 @@ function InfoIcon() {
|
|
|
240
239
|
path: path
|
|
241
240
|
});
|
|
242
241
|
}
|
|
243
|
-
var Path = styled__default["default"].path(_templateObject$
|
|
242
|
+
var Path = styled__default["default"].path(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n fill: ", ";\n fill-rule: evenodd;\n"])), function (_ref) {
|
|
244
243
|
var theme = _ref.theme;
|
|
245
244
|
return theme.color.surface1;
|
|
246
245
|
});
|
|
247
246
|
|
|
248
|
-
var _templateObject$
|
|
247
|
+
var _templateObject$b, _templateObject2$9, _templateObject3$8, _templateObject4$7;
|
|
249
248
|
function HintText(_ref) {
|
|
250
249
|
var children = _ref.children,
|
|
251
250
|
context = _ref.context,
|
|
@@ -255,7 +254,7 @@ function HintText(_ref) {
|
|
|
255
254
|
context: context
|
|
256
255
|
}, /*#__PURE__*/React__default["default"].createElement(IconWrap, null, /*#__PURE__*/React__default["default"].createElement(InfoIcon, null)), /*#__PURE__*/React__default["default"].createElement(Text$2, null, children));
|
|
257
256
|
}
|
|
258
|
-
var Container$2 = styled__default["default"].div.attrs(styledProps)(_templateObject$
|
|
257
|
+
var Container$2 = styled__default["default"].div.attrs(styledProps)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }\n\n display: flex;\n align-items: flex-start;\n ", "\n"])), function (p) {
|
|
259
258
|
return theme(function (o) {
|
|
260
259
|
return [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p["default"].vertical), o.padding.horizontal(p["default"].horizontal)];
|
|
261
260
|
});
|
|
@@ -267,9 +266,9 @@ var Container$2 = styled__default["default"].div.attrs(styledProps)(_templateObj
|
|
|
267
266
|
return [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)];
|
|
268
267
|
});
|
|
269
268
|
}, function (p) {
|
|
270
|
-
return p.context === 'page' && styled.css(_templateObject2$
|
|
269
|
+
return p.context === 'page' && styled.css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
271
270
|
});
|
|
272
|
-
var IconWrap = styled__default["default"].div(_templateObject3$
|
|
271
|
+
var IconWrap = styled__default["default"].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n color: ", ";\n height: 22px;\n margin: -4px 4px -4px 0;\n"])), function (p) {
|
|
273
272
|
return p.theme.color.text4;
|
|
274
273
|
});
|
|
275
274
|
var Text$2 = styled__default["default"].p(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0;\n"])), theme(function (o) {
|
|
@@ -487,7 +486,7 @@ function useDebounceAnimationState(defaultValue) {
|
|
|
487
486
|
return [state, setDebounceState];
|
|
488
487
|
}
|
|
489
488
|
|
|
490
|
-
var _templateObject$
|
|
489
|
+
var _templateObject$a, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
|
|
491
490
|
var LayoutConfigContext = React__default["default"].createContext({
|
|
492
491
|
wide: false,
|
|
493
492
|
center: false,
|
|
@@ -513,14 +512,14 @@ function Layout(_ref) {
|
|
|
513
512
|
center: center
|
|
514
513
|
}, header != null && /*#__PURE__*/React__default["default"].createElement(Header, null, header), isHeaderTopMenu && /*#__PURE__*/React__default["default"].createElement(HeaderTopMenuContainer, null, menu), /*#__PURE__*/React__default["default"].createElement(Grid, null, children))), /*#__PURE__*/React__default["default"].createElement(GlobalStyle, null));
|
|
515
514
|
}
|
|
516
|
-
var HeaderTopMenuContainer = styled__default["default"].div(_templateObject$
|
|
515
|
+
var HeaderTopMenuContainer = styled__default["default"].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n margin-bottom: 40px;\n overflow-x: auto;\n word-break: keep-all;\n\n @media ", " {\n margin-bottom: 0;\n padding-left: 16px;\n padding-bottom: 16px;\n background-color: ", ";\n }\n"])), function (_ref2) {
|
|
517
516
|
var theme = _ref2.theme;
|
|
518
517
|
return utils.maxWidth(theme.breakpoint.screen1);
|
|
519
518
|
}, function (_ref3) {
|
|
520
519
|
var theme = _ref3.theme;
|
|
521
520
|
return theme.color.surface2;
|
|
522
521
|
});
|
|
523
|
-
var GlobalStyle = styled.createGlobalStyle(_templateObject2$
|
|
522
|
+
var GlobalStyle = styled.createGlobalStyle(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n :root {\n background-color: ", ";\n\n @media ", " {\n background-color: ", ";\n }\n }\n"])), function (_ref4) {
|
|
524
523
|
var theme = _ref4.theme;
|
|
525
524
|
return theme.color.background2;
|
|
526
525
|
}, function (_ref5) {
|
|
@@ -530,7 +529,7 @@ var GlobalStyle = styled.createGlobalStyle(_templateObject2$9 || (_templateObjec
|
|
|
530
529
|
var theme = _ref6.theme;
|
|
531
530
|
return theme.color.background1;
|
|
532
531
|
});
|
|
533
|
-
var LayoutRoot = styled__default["default"].div(_templateObject3$
|
|
532
|
+
var LayoutRoot = styled__default["default"].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n background-color: ", ";\n\n @media ", " {\n background-color: ", ";\n }\n"])), function (_ref7) {
|
|
534
533
|
var theme = _ref7.theme;
|
|
535
534
|
return theme.color.background2;
|
|
536
535
|
}, function (_ref8) {
|
|
@@ -751,7 +750,7 @@ var onlyText = function onlyText(children) {
|
|
|
751
750
|
}, '');
|
|
752
751
|
};
|
|
753
752
|
|
|
754
|
-
var _templateObject$
|
|
753
|
+
var _templateObject$9, _templateObject2$7, _templateObject3$6;
|
|
755
754
|
/**
|
|
756
755
|
* 複数行のテキストに表示行数制限を設けて`...`で省略する
|
|
757
756
|
*/
|
|
@@ -763,20 +762,20 @@ var TextEllipsis = styled__default["default"].div.attrs(function (_ref) {
|
|
|
763
762
|
return {
|
|
764
763
|
title: title !== '' ? title : undefined
|
|
765
764
|
};
|
|
766
|
-
})(_templateObject$
|
|
765
|
+
})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n line-height: ", "px;\n /* For english */\n overflow-wrap: break-word;\n\n ", "\n"])), function (props) {
|
|
767
766
|
return props.lineHeight;
|
|
768
767
|
}, function (_ref2) {
|
|
769
768
|
var _ref2$lineLimit = _ref2.lineLimit,
|
|
770
769
|
lineLimit = _ref2$lineLimit === void 0 ? 1 : _ref2$lineLimit,
|
|
771
770
|
lineHeight = _ref2.lineHeight;
|
|
772
|
-
return lineLimit === 1 ? styled.css(_templateObject2$
|
|
771
|
+
return lineLimit === 1 ? styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))) : styled.css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n /* Fallback for -webkit-line-clamp */\n max-height: ", "px;\n "])), lineLimit, lineHeight * lineLimit);
|
|
773
772
|
});
|
|
774
773
|
|
|
775
774
|
var _excluded$2 = ["link", "onClick", "disabled", "primary", "secondary", "gtmClass", "noHover", "children"],
|
|
776
775
|
_excluded2 = ["icon", "primary"],
|
|
777
776
|
_excluded3 = ["icon", "primary"];
|
|
778
777
|
|
|
779
|
-
var _templateObject$
|
|
778
|
+
var _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
|
|
780
779
|
var MenuListItemContext = React__default["default"].createContext({
|
|
781
780
|
padding: 24
|
|
782
781
|
});
|
|
@@ -813,21 +812,21 @@ function MenuListItem(_ref) {
|
|
|
813
812
|
lineLimit: 1
|
|
814
813
|
}, secondary))), children);
|
|
815
814
|
}
|
|
816
|
-
var Item = styled__default["default"].div(_templateObject$
|
|
815
|
+
var Item = styled__default["default"].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n height: ", "px;\n align-items: center;\n justify-content: space-between;\n padding: 0 ", "px;\n user-select: none;\n cursor: ", ";\n transition: 0.2s background-color;\n\n &:hover {\n ", "\n }\n\n ", "\n\n ", " {\n cursor: default;\n pointer-events: none;\n\n &:hover {\n background-color: unset;\n }\n }\n"])), function (p) {
|
|
817
816
|
return p.hasSubLabel ? 56 : 40;
|
|
818
817
|
}, function (p) {
|
|
819
818
|
return p.sidePadding;
|
|
820
819
|
}, function (p) {
|
|
821
820
|
return p.noClick ? 'default' : 'pointer';
|
|
822
821
|
}, function (p) {
|
|
823
|
-
return !p.noHover && styled.css(_templateObject2$
|
|
822
|
+
return !p.noHover && styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), function (_ref2) {
|
|
824
823
|
var theme = _ref2.theme;
|
|
825
824
|
return theme.color.surface3;
|
|
826
825
|
});
|
|
827
826
|
}, theme(function (o) {
|
|
828
827
|
return o.disabled;
|
|
829
828
|
}), utils.disabledSelector);
|
|
830
|
-
var Labels = styled__default["default"].div(_templateObject3$
|
|
829
|
+
var Labels = styled__default["default"].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
831
830
|
var PrimaryText = styled__default["default"].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n color: ", ";\n line-height: 22px;\n font-size: 14px;\n display: grid;\n"])), function (p) {
|
|
832
831
|
return p.theme.color.text2;
|
|
833
832
|
});
|
|
@@ -875,7 +874,7 @@ function MenuListLinkItemWithIcon(_ref4) {
|
|
|
875
874
|
text = _ref4.primary,
|
|
876
875
|
props = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
877
876
|
|
|
878
|
-
var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$
|
|
877
|
+
var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$1, null, icon), text);
|
|
879
878
|
return /*#__PURE__*/React__default["default"].createElement(MenuListLinkItem, _extends({
|
|
880
879
|
primary: primary
|
|
881
880
|
}, props));
|
|
@@ -885,13 +884,13 @@ function MenuListItemWithIcon(_ref5) {
|
|
|
885
884
|
text = _ref5.primary,
|
|
886
885
|
props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
|
|
887
886
|
|
|
888
|
-
var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$
|
|
887
|
+
var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$1, null, icon), text);
|
|
889
888
|
return /*#__PURE__*/React__default["default"].createElement(MenuListItem, _extends({
|
|
890
889
|
primary: primary
|
|
891
890
|
}, props));
|
|
892
891
|
}
|
|
893
892
|
var IconContainer = styled__default["default"].div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n display: grid;\n gap: 8px;\n grid-auto-flow: column;\n align-items: center;\n"])));
|
|
894
|
-
var Icon$
|
|
893
|
+
var Icon$1 = styled__default["default"].div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n"])), function (_ref6) {
|
|
895
894
|
var theme = _ref6.theme;
|
|
896
895
|
return theme.color.text3;
|
|
897
896
|
});
|
|
@@ -901,7 +900,7 @@ var MenuListLabel = styled__default["default"].div(_templateObject10$3 || (_temp
|
|
|
901
900
|
return theme.color.text3;
|
|
902
901
|
});
|
|
903
902
|
|
|
904
|
-
var _templateObject$
|
|
903
|
+
var _templateObject$7, _templateObject2$5;
|
|
905
904
|
function LeftMenu(_ref) {
|
|
906
905
|
var links = _ref.links,
|
|
907
906
|
active = _ref.active;
|
|
@@ -928,8 +927,8 @@ function LeftMenuContent(_ref2) {
|
|
|
928
927
|
});
|
|
929
928
|
}));
|
|
930
929
|
}
|
|
931
|
-
var Container$1 = styled__default["default"].div(_templateObject$
|
|
932
|
-
var LinkItem = styled__default["default"].div(_templateObject2$
|
|
930
|
+
var Container$1 = styled__default["default"].div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"])));
|
|
931
|
+
var LinkItem = styled__default["default"].div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n color: ", ";\n border-radius: 24px;\n font-weight: bold;\n font-size: 14px;\n line-height: 22px;\n padding: 0 16px;\n height: 40px;\n transition: 0.2s color;\n &:hover {\n transition: 0.2s color;\n color: ", ";\n }\n &[aria-current] {\n color: ", ";\n background-color: ", ";\n }\n"])), function (_ref3) {
|
|
933
932
|
var theme = _ref3.theme;
|
|
934
933
|
return theme.color.text3;
|
|
935
934
|
}, function (_ref4) {
|
|
@@ -943,7 +942,7 @@ var LinkItem = styled__default["default"].div(_templateObject2$6 || (_templateOb
|
|
|
943
942
|
return theme.color.surface3;
|
|
944
943
|
});
|
|
945
944
|
|
|
946
|
-
var _templateObject$
|
|
945
|
+
var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2;
|
|
947
946
|
|
|
948
947
|
var _excluded$1 = ["gtmClass", "flex", "rowReverse", "children", "disabled"];
|
|
949
948
|
var index$2 = React__default["default"].forwardRef(function SwitchCheckbox(_ref, ref) {
|
|
@@ -968,8 +967,8 @@ var index$2 = React__default["default"].forwardRef(function SwitchCheckbox(_ref,
|
|
|
968
967
|
rowReverse: rowReverse
|
|
969
968
|
}, children));
|
|
970
969
|
});
|
|
971
|
-
var Children = styled__default["default"].span(_templateObject$
|
|
972
|
-
return p.rowReverse ? styled.css(_templateObject2$
|
|
970
|
+
var Children = styled__default["default"].span(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (p) {
|
|
971
|
+
return p.rowReverse ? styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n margin-right: 8px;\n "]))) : styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n margin-left: 8px;\n "])));
|
|
973
972
|
});
|
|
974
973
|
var Label = styled__default["default"].label(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n ", "\n ", "\n cursor: pointer;\n outline: 0;\n\n &[aria-disabled='true'] {\n cursor: auto;\n }\n"])), function (_ref2) {
|
|
975
974
|
var flex = _ref2.flex;
|
|
@@ -1000,7 +999,7 @@ var SwitchInput = styled__default["default"].input.attrs({
|
|
|
1000
999
|
return utils.applyEffect(theme.color.brand, theme.elementEffect.disabled);
|
|
1001
1000
|
});
|
|
1002
1001
|
|
|
1003
|
-
var _templateObject$
|
|
1002
|
+
var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
|
|
1004
1003
|
var index$1 = React__default["default"].memo(function WithIcon(_ref) {
|
|
1005
1004
|
var children = _ref.children,
|
|
1006
1005
|
icon = _ref.icon,
|
|
@@ -1020,7 +1019,7 @@ var index$1 = React__default["default"].memo(function WithIcon(_ref) {
|
|
|
1020
1019
|
width: width,
|
|
1021
1020
|
show: show,
|
|
1022
1021
|
pre: pre
|
|
1023
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon
|
|
1022
|
+
}, /*#__PURE__*/React__default["default"].createElement(Icon, null, icon)) : /*#__PURE__*/React__default["default"].createElement(IconAnchorNaive, {
|
|
1024
1023
|
show: show,
|
|
1025
1024
|
pre: pre
|
|
1026
1025
|
}, /*#__PURE__*/React__default["default"].createElement(IconNaive, null, icon));
|
|
@@ -1028,9 +1027,9 @@ var index$1 = React__default["default"].memo(function WithIcon(_ref) {
|
|
|
1028
1027
|
fixed: fixed
|
|
1029
1028
|
}, children), !pre && node);
|
|
1030
1029
|
});
|
|
1031
|
-
var Root = styled__default["default"].div(_templateObject$
|
|
1032
|
-
var Text$1 = styled__default["default"].div(_templateObject2$
|
|
1033
|
-
return !p.fixed && styled.css(_templateObject3$
|
|
1030
|
+
var Root = styled__default["default"].div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
1031
|
+
var Text$1 = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n ", "\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (p) {
|
|
1032
|
+
return !p.fixed && styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n min-width: 0;\n overflow: hidden;\n "])));
|
|
1034
1033
|
});
|
|
1035
1034
|
|
|
1036
1035
|
function AutoWidthIconAnchor(_ref2) {
|
|
@@ -1046,7 +1045,7 @@ function AutoWidthIconAnchor(_ref2) {
|
|
|
1046
1045
|
width: width,
|
|
1047
1046
|
show: show,
|
|
1048
1047
|
pre: pre
|
|
1049
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon
|
|
1048
|
+
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
1050
1049
|
ref: ref
|
|
1051
1050
|
}, children));
|
|
1052
1051
|
}
|
|
@@ -1062,7 +1061,7 @@ var IconNaive = styled__default["default"].div(_templateObject11 || (_templateOb
|
|
|
1062
1061
|
var IconAnchor = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n /* Icon\u3092line-height\u306B\u95A2\u4E0E\u3055\u305B\u306A\u3044 */\n height: 0;\n /* \u6A2A\u65B9\u5411\u306E\u9818\u57DF\u306F\u78BA\u4FDD\u3059\u308B */\n width: ", "px;\n\n ", "\n"])), function (p) {
|
|
1063
1062
|
return p.width;
|
|
1064
1063
|
}, iconAnchorCss);
|
|
1065
|
-
var Icon
|
|
1064
|
+
var Icon = styled__default["default"].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n position: absolute;\n transform: translateY(-50%);\n\n ", "\n"])), forceCenteringCss);
|
|
1066
1065
|
|
|
1067
1066
|
var passiveEventsResult; // eslint-disable-line no-var
|
|
1068
1067
|
|
|
@@ -1143,7 +1142,7 @@ function directionToTransform$1(direction) {
|
|
|
1143
1142
|
}
|
|
1144
1143
|
}
|
|
1145
1144
|
|
|
1146
|
-
var _templateObject$
|
|
1145
|
+
var _templateObject$4, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$1;
|
|
1147
1146
|
var Direction;
|
|
1148
1147
|
|
|
1149
1148
|
(function (Direction) {
|
|
@@ -1184,14 +1183,14 @@ function CarouselButton(_ref) {
|
|
|
1184
1183
|
})));
|
|
1185
1184
|
}
|
|
1186
1185
|
var CAROUSEL_BUTTON_SIZE = 40;
|
|
1187
|
-
var CarouselButtonIcon = styled__default["default"].div(_templateObject$
|
|
1186
|
+
var CarouselButtonIcon = styled__default["default"].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n background-color: ", ";\n transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n color: ", ";\n"])), CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, function (_ref2) {
|
|
1188
1187
|
var theme = _ref2.theme;
|
|
1189
1188
|
return theme.color.surface4;
|
|
1190
1189
|
}, function (_ref3) {
|
|
1191
1190
|
var theme = _ref3.theme;
|
|
1192
1191
|
return theme.color.text5;
|
|
1193
1192
|
});
|
|
1194
|
-
var Button = styled__default["default"].button(_templateObject2$
|
|
1193
|
+
var Button = styled__default["default"].button(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n padding: 0;\n min-width: 40px;\n border: none;\n outline: 0;\n background: transparent;\n cursor: pointer;\n transition: 0.4s visibility, 0.4s opacity;\n /* \u3064\u3089\u3044 */\n /* \u3053\u306E\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306FCarousel\u3067\u3057\u304B\u4F7F\u308F\u308C\u3066\u306A\u3044\u306E\u3067\u305D\u3063\u3061\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3067\u5207\u308B */\n z-index: 1;\n\n &:hover ", " {\n background-color: ", ";\n color: ", ";\n }\n\n &:active ", " {\n background-color: ", ";\n color: ", ";\n }\n\n ", "\n"])), CarouselButtonIcon, function (_ref4) {
|
|
1195
1194
|
var theme = _ref4.theme;
|
|
1196
1195
|
return utils.applyEffect(theme.color.surface4, theme.effect.hover);
|
|
1197
1196
|
}, function (_ref5) {
|
|
@@ -1204,7 +1203,7 @@ var Button = styled__default["default"].button(_templateObject2$3 || (_templateO
|
|
|
1204
1203
|
var theme = _ref7.theme;
|
|
1205
1204
|
return utils.applyEffect(theme.color.text5, theme.effect.press);
|
|
1206
1205
|
}, function (p) {
|
|
1207
|
-
return p.hide && styled.css(_templateObject3$
|
|
1206
|
+
return p.hide && styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n "])));
|
|
1208
1207
|
});
|
|
1209
1208
|
styled__default["default"](CarouselButtonIcon)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n"])), function (_ref9) {
|
|
1210
1209
|
var theme = _ref9.theme;
|
|
@@ -1221,7 +1220,7 @@ styled__default["default"](CarouselButtonIcon)(_templateObject4$2 || (_templateO
|
|
|
1221
1220
|
});
|
|
1222
1221
|
var onlyNonTouchDevice = styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n @media (hover: none) and (pointer: coarse) {\n display: none;\n }\n"])));
|
|
1223
1222
|
|
|
1224
|
-
var _templateObject$
|
|
1223
|
+
var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
1225
1224
|
|
|
1226
1225
|
var _excluded = ["buttonOffset", "buttonPadding", "bottomOffset", "defaultScroll", "onScroll", "onResize", "children", "centerItems", "onScrollStateChange", "scrollAmountCoef"];
|
|
1227
1226
|
var GRADIENT_WIDTH = 72;
|
|
@@ -1490,10 +1489,10 @@ function Carousel(_ref) {
|
|
|
1490
1489
|
onClick: handleRight
|
|
1491
1490
|
})));
|
|
1492
1491
|
}
|
|
1493
|
-
var CarouselContainer = styled__default["default"].ul(_templateObject$
|
|
1492
|
+
var CarouselContainer = styled__default["default"].ul(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n vertical-align: top;\n overflow: hidden;\n list-style: none;\n padding: 0;\n\n /* \u6700\u5C0F\u5E45\u3092100%\u306B\u3057\u3066\u89AA\u8981\u7D20\u306B\u3074\u3063\u305F\u308A\u304F\u3063\u3064\u3051\u308B\u3053\u3068\u3067\u5B50\u8981\u7D20\u3067\u8981\u7D20\u3092\u5747\u7B49\u306B\u5272\u308A\u4ED8\u3051\u308B\u306A\u3069\u3092\u51FA\u6765\u308B\u3088\u3046\u306B\u3057\u3066\u3042\u308B */\n min-width: 100%;\n box-sizing: border-box;\n\n ", "\n"])), function (_ref2) {
|
|
1494
1493
|
var _ref2$centerItems = _ref2.centerItems,
|
|
1495
1494
|
centerItems = _ref2$centerItems === void 0 ? false : _ref2$centerItems;
|
|
1496
|
-
return centerItems ? styled.css(_templateObject2$
|
|
1495
|
+
return centerItems ? styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: max-content;\n margin: 0 auto;\n "]))) : styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin: 0;\n "])));
|
|
1497
1496
|
});
|
|
1498
1497
|
var ButtonsContainer = styled__default["default"].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: 0.4s opacity;\n"])));
|
|
1499
1498
|
var Container = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n opacity: 1;\n }\n\n /* CarouselButton\u306E\u4E2D\u306Bz-index:1\u304C\u3042\u308B\u306E\u3067\u3053\u3053\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5207\u308B */\n position: relative;\n z-index: 0;\n"])), ButtonsContainer);
|
|
@@ -1506,7 +1505,7 @@ var LeftGradient = styled__default["default"].div(_templateObject10 || (_templat
|
|
|
1506
1505
|
return p.show ? 0 : -GRADIENT_WIDTH;
|
|
1507
1506
|
});
|
|
1508
1507
|
|
|
1509
|
-
var _templateObject$
|
|
1508
|
+
var _templateObject$2;
|
|
1510
1509
|
|
|
1511
1510
|
function DotsIcon(_ref) {
|
|
1512
1511
|
var size = _ref.size;
|
|
@@ -1524,9 +1523,9 @@ function DotsIcon(_ref) {
|
|
|
1524
1523
|
DotsIcon.defaultProps = {
|
|
1525
1524
|
size: 16
|
|
1526
1525
|
};
|
|
1527
|
-
var StyledSVG = styled__default["default"].svg(_templateObject$
|
|
1526
|
+
var StyledSVG = styled__default["default"].svg(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n fill: currentColor;\n"])));
|
|
1528
1527
|
|
|
1529
|
-
var _templateObject$
|
|
1528
|
+
var _templateObject$1;
|
|
1530
1529
|
var WedgeDirection;
|
|
1531
1530
|
|
|
1532
1531
|
(function (WedgeDirection) {
|
|
@@ -1579,9 +1578,9 @@ function directionToTransform(direction) {
|
|
|
1579
1578
|
}
|
|
1580
1579
|
}
|
|
1581
1580
|
|
|
1582
|
-
var StyledPolyline = styled__default["default"].polyline(_templateObject$
|
|
1581
|
+
var StyledPolyline = styled__default["default"].polyline(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke-linejoin: round;\n stroke-linecap: round;\n stroke: currentColor;\n"])));
|
|
1583
1582
|
|
|
1584
|
-
var _templateObject
|
|
1583
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
1585
1584
|
|
|
1586
1585
|
function usePagerWindow(page, pageCount, windowSize) {
|
|
1587
1586
|
if (windowSize === void 0) {
|
|
@@ -1734,8 +1733,8 @@ function LinkPager(_ref2) {
|
|
|
1734
1733
|
direction: WedgeDirection.Right
|
|
1735
1734
|
}))));
|
|
1736
1735
|
}
|
|
1737
|
-
var PagerContainer = styled__default["default"].nav(_templateObject
|
|
1738
|
-
var CircleButton = styled__default["default"].button(_templateObject2
|
|
1736
|
+
var PagerContainer = styled__default["default"].nav(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
1737
|
+
var CircleButton = styled__default["default"].button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n font-size: 1rem;\n line-height: calc(1em + 8px);\n text-decoration: none;\n border: none;\n outline: none;\n touch-action: manipulation;\n user-select: none;\n transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,\n background 0.2s ease 0s, opacity 0.2s ease 0s;\n\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: content-box;\n min-width: 24px;\n min-height: 24px;\n padding: 8px;\n cursor: pointer;\n font-weight: bold;\n /* HACK:\n * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n */\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-transform: translateZ(0);\n\n &[hidden] {\n visibility: hidden;\n display: block;\n }\n\n border-radius: 48px;\n\n background: transparent;\n color: ", ";\n\n &:hover {\n background: ", ";\n color: ", ";\n }\n\n &[aria-current] {\n background-color: ", ";\n color: ", ";\n }\n\n &[aria-current]:hover {\n background-color: ", ";\n color: ", ";\n }\n\n ", "\n"])), function (_ref3) {
|
|
1739
1738
|
var theme = _ref3.theme;
|
|
1740
1739
|
return theme.color.text3;
|
|
1741
1740
|
}, function (_ref4) {
|
|
@@ -1759,7 +1758,7 @@ var CircleButton = styled__default["default"].button(_templateObject2$1 || (_tem
|
|
|
1759
1758
|
}, function (_ref10) {
|
|
1760
1759
|
var _ref10$noBackground = _ref10.noBackground,
|
|
1761
1760
|
noBackground = _ref10$noBackground === void 0 ? false : _ref10$noBackground;
|
|
1762
|
-
return noBackground && styled.css(_templateObject3
|
|
1761
|
+
return noBackground && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n /* stylelint-disable-next-line no-duplicate-selectors */\n &:hover {\n background: transparent;\n }\n "])));
|
|
1763
1762
|
});
|
|
1764
1763
|
var Spacer = styled__default["default"](CircleButton).attrs({
|
|
1765
1764
|
type: 'button',
|
|
@@ -1770,66 +1769,6 @@ var Spacer = styled__default["default"](CircleButton).attrs({
|
|
|
1770
1769
|
});
|
|
1771
1770
|
var Text = 'span';
|
|
1772
1771
|
|
|
1773
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
1774
|
-
function Spinner(_ref) {
|
|
1775
|
-
var _ref$size = _ref.size,
|
|
1776
|
-
size = _ref$size === void 0 ? 48 : _ref$size,
|
|
1777
|
-
_ref$padding = _ref.padding,
|
|
1778
|
-
padding = _ref$padding === void 0 ? 16 : _ref$padding,
|
|
1779
|
-
_ref$transparent = _ref.transparent,
|
|
1780
|
-
transparent = _ref$transparent === void 0 ? false : _ref$transparent;
|
|
1781
|
-
return /*#__PURE__*/React__default["default"].createElement(SpinnerRoot, {
|
|
1782
|
-
size: size,
|
|
1783
|
-
padding: padding,
|
|
1784
|
-
transparent: transparent
|
|
1785
|
-
}, /*#__PURE__*/React__default["default"].createElement(SpinnerIcon, null));
|
|
1786
|
-
}
|
|
1787
|
-
var SpinnerRoot = styled__default["default"].div.attrs({
|
|
1788
|
-
role: 'progressbar'
|
|
1789
|
-
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n margin: auto;\n padding: ", "px;\n border-radius: 8px;\n font-size: ", "px;\n width: ", "px;\n height: ", "px;\n background-color: ", ";\n color: ", ";\n"])), function (props) {
|
|
1790
|
-
return props.padding;
|
|
1791
|
-
}, function (props) {
|
|
1792
|
-
return props.size;
|
|
1793
|
-
}, function (props) {
|
|
1794
|
-
return props.size;
|
|
1795
|
-
}, function (props) {
|
|
1796
|
-
return props.size;
|
|
1797
|
-
}, function (_ref2) {
|
|
1798
|
-
var theme = _ref2.theme,
|
|
1799
|
-
transparent = _ref2.transparent;
|
|
1800
|
-
return transparent ? 'transparent' : polished.transparentize(0.32, theme.color.background1);
|
|
1801
|
-
}, function (_ref3) {
|
|
1802
|
-
var theme = _ref3.theme;
|
|
1803
|
-
return theme.color.text4;
|
|
1804
|
-
});
|
|
1805
|
-
var scaleout = styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n from {\n transform: scale(0);\n opacity: 1;\n }\n\n to {\n transform: scale(1);\n opacity: 0;\n }\n"])));
|
|
1806
|
-
var Icon = styled__default["default"].div.attrs({
|
|
1807
|
-
role: 'presentation'
|
|
1808
|
-
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n width: 1em;\n height: 1em;\n border-radius: 1em;\n background-color: currentColor;\n animation: ", " 1s both ease-out;\n animation-iteration-count: ", ";\n\n &[data-reset-animation] {\n animation: none;\n }\n"])), scaleout, function (p) {
|
|
1809
|
-
return p.once ? 1 : 'infinite';
|
|
1810
|
-
});
|
|
1811
|
-
var SpinnerIcon = React__default["default"].forwardRef(function SpinnerIcon(_ref4, ref) {
|
|
1812
|
-
var _ref4$once = _ref4.once,
|
|
1813
|
-
once = _ref4$once === void 0 ? false : _ref4$once;
|
|
1814
|
-
var iconRef = React.useRef(null);
|
|
1815
|
-
React.useImperativeHandle(ref, function () {
|
|
1816
|
-
return {
|
|
1817
|
-
restart: function restart() {
|
|
1818
|
-
if (!iconRef.current) {
|
|
1819
|
-
return;
|
|
1820
|
-
}
|
|
1821
|
-
|
|
1822
|
-
iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
|
|
1823
|
-
delete iconRef.current.dataset.resetAnimation;
|
|
1824
|
-
}
|
|
1825
|
-
};
|
|
1826
|
-
});
|
|
1827
|
-
return /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
1828
|
-
ref: iconRef,
|
|
1829
|
-
once: once
|
|
1830
|
-
});
|
|
1831
|
-
});
|
|
1832
|
-
|
|
1833
1772
|
Object.defineProperty(exports, 'ComponentAbstraction', {
|
|
1834
1773
|
enumerable: true,
|
|
1835
1774
|
get: function () { return react.ComponentAbstraction; }
|
|
@@ -1864,8 +1803,6 @@ exports.MenuListSpacer = MenuListSpacer;
|
|
|
1864
1803
|
exports.Pager = index;
|
|
1865
1804
|
exports.RESPONSIVE_LEFT_WIDTH = RESPONSIVE_LEFT_WIDTH;
|
|
1866
1805
|
exports.RESPONSIVE_MAIN_MAX_WIDTH = RESPONSIVE_MAIN_MAX_WIDTH;
|
|
1867
|
-
exports.Spinner = Spinner;
|
|
1868
|
-
exports.SpinnerIcon = SpinnerIcon;
|
|
1869
1806
|
exports.StyledCancelLayoutItemBodyPadding = StyledCancelLayoutItemBodyPadding;
|
|
1870
1807
|
exports.StyledLayoutItemBody = StyledLayoutItemBody;
|
|
1871
1808
|
exports.SwitchCheckbox = index$2;
|