@sitecore/sc-contenthub-blok 0.0.18 → 0.0.19
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/Components/BlokIcon/BlokIcon.d.ts +2 -1
- package/dist/Components/BlokIcon/BlokIcon.js +9 -3
- package/dist/Components/BlokIcon/BlokIcon.js.map +1 -1
- package/dist/Components/BlokIcon/BlokIcon.stories.js +1 -1
- package/dist/Components/BlokIcon/BlokIcon.stories.js.map +1 -1
- package/dist/Foundations/sizes.d.ts +2 -0
- package/dist/Foundations/sizes.js +3 -1
- package/dist/Foundations/sizes.js.map +1 -1
- package/esm/Components/BlokIcon/BlokIcon.js +10 -4
- package/esm/Components/BlokIcon/BlokIcon.js.map +1 -1
- package/esm/Foundations/sizes.js +2 -0
- package/esm/Foundations/sizes.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,7 +11,8 @@ export interface BlokIconProps extends HTMLProps<HTMLElement> {
|
|
|
11
11
|
iconColorShade?: ColorShade;
|
|
12
12
|
iconBackgroundColor?: ColorName | "inherit";
|
|
13
13
|
iconBackgroundColorShade?: ColorShade;
|
|
14
|
-
iconSize?: "default" | "small";
|
|
14
|
+
iconSize?: "default" | "small" | "extraSmall";
|
|
15
15
|
ignoreIconOverride?: boolean;
|
|
16
|
+
fontSize?: string;
|
|
16
17
|
}
|
|
17
18
|
export declare const BlokIcon: FC<BlokIconProps>;
|
|
@@ -7,8 +7,14 @@ const react_1 = require("react");
|
|
|
7
7
|
const react_intersection_observer_1 = require("react-intersection-observer");
|
|
8
8
|
const Foundations_1 = require("../../Foundations");
|
|
9
9
|
const useSvgIcon_1 = require("./useSvgIcon");
|
|
10
|
+
const extraSmallIcon = (0, css_1.css)({
|
|
11
|
+
fontSize: Foundations_1.iconSizeExtraSmall,
|
|
12
|
+
});
|
|
10
13
|
const smallIcon = (0, css_1.css)({
|
|
11
|
-
fontSize:
|
|
14
|
+
fontSize: Foundations_1.iconSizeSmall,
|
|
15
|
+
});
|
|
16
|
+
const defaultIcon = (0, css_1.css)({
|
|
17
|
+
fontSize: Foundations_1.iconSizeDefault,
|
|
12
18
|
});
|
|
13
19
|
const svgStyles = (0, css_1.css)({
|
|
14
20
|
lineHeight: 1,
|
|
@@ -34,7 +40,7 @@ const svgStyles = (0, css_1.css)({
|
|
|
34
40
|
display: "none", // We need to make sure that on hybrid pages the icons are not shown twice.
|
|
35
41
|
},
|
|
36
42
|
});
|
|
37
|
-
exports.BlokIcon = (0, react_1.forwardRef)(function ContentHubIcon({ icon, classes, label, iconColor, iconColorShade = 500, iconBackgroundColor, iconBackgroundColorShade = 100, iconSize = "default", ignoreIconOverride = false, ...props }, ref) {
|
|
43
|
+
exports.BlokIcon = (0, react_1.forwardRef)(function ContentHubIcon({ icon, classes, label, iconColor, iconColorShade = 500, iconBackgroundColor, iconBackgroundColorShade = 100, iconSize = "default", ignoreIconOverride = false, fontSize, ...props }, ref) {
|
|
38
44
|
const iconName = icon.replace("m-icon ", "").replace("m-icon-", "");
|
|
39
45
|
const fullIconName = `m-icon-${iconName}`;
|
|
40
46
|
const { inView, ref: inViewRef } = (0, react_intersection_observer_1.useInView)();
|
|
@@ -49,6 +55,6 @@ exports.BlokIcon = (0, react_1.forwardRef)(function ContentHubIcon({ icon, class
|
|
|
49
55
|
inViewRef(node);
|
|
50
56
|
}, className: (0, css_1.cx)("m-icon", classes, icon, iconColor ? (0, Foundations_1.colorByName)(iconColor, iconColorShade) : null, iconBackgroundColor
|
|
51
57
|
? (0, Foundations_1.backgroundColorByName)(iconBackgroundColor, iconBackgroundColorShade)
|
|
52
|
-
: null, iconSize === "small" ? smallIcon : undefined, svgStyles), ...props, "aria-label": label ?? fullIconName, "data-testid": fullIconName, dangerouslySetInnerHTML: { __html: svgIcon } }));
|
|
58
|
+
: null, iconSize === "small" ? smallIcon : undefined, iconSize === "extraSmall" ? extraSmallIcon : undefined, iconSize === "default" ? defaultIcon : undefined, svgStyles), ...props, style: fontSize ? { fontSize } : undefined, "aria-label": label ?? fullIconName, "data-testid": fullIconName, dangerouslySetInnerHTML: { __html: svgIcon } }));
|
|
53
59
|
});
|
|
54
60
|
//# sourceMappingURL=BlokIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAkD;AAClD,6EAAwD;AAExD,
|
|
1
|
+
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ exports.Icons = {
|
|
|
18
18
|
controls: { disable: true, expanded: false },
|
|
19
19
|
options: { showPanel: false },
|
|
20
20
|
},
|
|
21
|
-
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(BlokAlert_1.BlokAlert, { children: ["When using icons make sure that there is a ", (0, jsx_runtime_1.jsx)("code", { children: "DIV" }), " with an id of ", (0, jsx_runtime_1.jsx)("code", { children: "\"icons-wrapper\"" }), " in the dom. ContentHub already includes this div."] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "22px", display: "flex", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red", iconBackgroundColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconSize: "small" })] })] })),
|
|
21
|
+
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(BlokAlert_1.BlokAlert, { children: ["When using icons make sure that there is a ", (0, jsx_runtime_1.jsx)("code", { children: "DIV" }), " with an id of ", (0, jsx_runtime_1.jsx)("code", { children: "\"icons-wrapper\"" }), " in the dom. ContentHub already includes this div."] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "22px", display: "flex", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red", iconBackgroundColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconSize: "small" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconSize: "extraSmall" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", fontSize: "100px" })] })] })),
|
|
22
22
|
};
|
|
23
23
|
exports.PlayGround = {
|
|
24
24
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,sDAAmD;AACnD,yCAAqD;AAIrD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC5C,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;KAC9B;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,wBAAC,qBAAS,8DACmC,mDAAgB,qBACxD,iEAA4B,0DAErB,EACZ,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,GAAG,EAChC,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,GAAG,EAChD,uBAAC,mBAAQ,IACP,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,KAAK,EACf,mBAAmB,EAAC,KAAK,GACzB,EACF,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,IAC7C,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,sDAAmD;AACnD,yCAAqD;AAIrD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC5C,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;KAC9B;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,wBAAC,qBAAS,8DACmC,mDAAgB,qBACxD,iEAA4B,0DAErB,EACZ,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,GAAG,EAChC,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,GAAG,EAChD,uBAAC,mBAAQ,IACP,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,KAAK,EACf,mBAAmB,EAAC,KAAK,GACzB,EACF,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,EACjD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,YAAY,GAAG,EACtD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,IAC7C,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}
|
|
@@ -22,8 +22,10 @@ export declare const sizes: {
|
|
|
22
22
|
"4xl": string;
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
|
+
export declare const iconSizeExtraSmall = "16px";
|
|
25
26
|
export declare const iconSizeSmall = "20px";
|
|
26
27
|
export declare const iconSizeDefault = "22px";
|
|
28
|
+
export declare const iconSizeLarge = "48px";
|
|
27
29
|
export declare const gridImageHeight = 150;
|
|
28
30
|
export declare const modalFixedHeight = 600;
|
|
29
31
|
export declare const sidebarWidth = 378;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.containerPadding = exports.navbarPlusPageHeaderHeight = exports.navbarHeight = exports.searchTabsWidth = exports.searchGridItemSize = exports.relationMaxWidth = exports.optionListMaxWidth = exports.dateTimeOffsetTimeZoneMaxWidth = exports.dateTimeOffsetMaxWidth = exports.dateTimeMaxWidth = exports.multiLineEditorMinHeight = exports.multiLineEditorMaxWidth = exports.numberEditorMaxWidth = exports.inputMaxWidth = exports.wideSidebarWidth = exports.sidebarWidth = exports.modalFixedHeight = exports.gridImageHeight = exports.iconSizeDefault = exports.iconSizeSmall = exports.sizes = void 0;
|
|
3
|
+
exports.containerPadding = exports.navbarPlusPageHeaderHeight = exports.navbarHeight = exports.searchTabsWidth = exports.searchGridItemSize = exports.relationMaxWidth = exports.optionListMaxWidth = exports.dateTimeOffsetTimeZoneMaxWidth = exports.dateTimeOffsetMaxWidth = exports.dateTimeMaxWidth = exports.multiLineEditorMinHeight = exports.multiLineEditorMaxWidth = exports.numberEditorMaxWidth = exports.inputMaxWidth = exports.wideSidebarWidth = exports.sidebarWidth = exports.modalFixedHeight = exports.gridImageHeight = exports.iconSizeLarge = exports.iconSizeDefault = exports.iconSizeSmall = exports.iconSizeExtraSmall = exports.sizes = void 0;
|
|
4
4
|
exports.sizes = {
|
|
5
5
|
icon: {
|
|
6
6
|
default: "1.571428571428571em",
|
|
@@ -25,8 +25,10 @@ exports.sizes = {
|
|
|
25
25
|
"4xl": "2048px",
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
|
+
exports.iconSizeExtraSmall = "16px";
|
|
28
29
|
exports.iconSizeSmall = "20px";
|
|
29
30
|
exports.iconSizeDefault = "22px";
|
|
31
|
+
exports.iconSizeLarge = "48px";
|
|
30
32
|
exports.gridImageHeight = 150;
|
|
31
33
|
exports.modalFixedHeight = 600;
|
|
32
34
|
// Sidebar
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/Foundations/sizes.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AACW,QAAA,aAAa,GAAG,MAAM,CAAC;AACvB,QAAA,eAAe,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/Foundations/sizes.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AACW,QAAA,kBAAkB,GAAG,MAAM,CAAC;AAC5B,QAAA,aAAa,GAAG,MAAM,CAAC;AACvB,QAAA,eAAe,GAAG,MAAM,CAAC;AACzB,QAAA,aAAa,GAAG,MAAM,CAAC;AAEvB,QAAA,eAAe,GAAG,GAAG,CAAC;AACtB,QAAA,gBAAgB,GAAG,GAAG,CAAC;AACpC,UAAU;AACG,QAAA,YAAY,GAAG,GAAG,CAAC;AACnB,QAAA,gBAAgB,GAAG,GAAG,CAAC;AAEpC,QAAQ;AACK,QAAA,aAAa,GAAG,GAAG,CAAC;AACpB,QAAA,oBAAoB,GAAG,GAAG,CAAC;AAC3B,QAAA,uBAAuB,GAAG,GAAG,CAAC;AAC9B,QAAA,wBAAwB,GAAG,EAAE,CAAC;AAC9B,QAAA,gBAAgB,GAAG,GAAG,CAAC;AACvB,QAAA,sBAAsB,GAAG,GAAG,CAAC;AAC7B,QAAA,8BAA8B,GAAG,GAAG,CAAC;AACrC,QAAA,kBAAkB,GAAG,GAAG,CAAC;AACzB,QAAA,gBAAgB,GAAG,GAAG,CAAC;AACvB,QAAA,kBAAkB,GAAG;IAChC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,GAAG;CACX,CAAC;AACW,QAAA,eAAe,GAAG,OAAO,CAAC;AAC1B,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,0BAA0B,GAAG,QAAQ,CAAC;AACtC,QAAA,gBAAgB,GAAG,MAAM,CAAC"}
|
|
@@ -2,10 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { css, cx } from "@emotion/css";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { useInView } from "react-intersection-observer";
|
|
5
|
-
import { backgroundColorByName, colorByName, } from "../../Foundations";
|
|
5
|
+
import { backgroundColorByName, colorByName, iconSizeDefault, iconSizeExtraSmall, iconSizeSmall, } from "../../Foundations";
|
|
6
6
|
import { useReferencedSvgIcon } from "./useSvgIcon";
|
|
7
|
+
const extraSmallIcon = css({
|
|
8
|
+
fontSize: iconSizeExtraSmall,
|
|
9
|
+
});
|
|
7
10
|
const smallIcon = css({
|
|
8
|
-
fontSize:
|
|
11
|
+
fontSize: iconSizeSmall,
|
|
12
|
+
});
|
|
13
|
+
const defaultIcon = css({
|
|
14
|
+
fontSize: iconSizeDefault,
|
|
9
15
|
});
|
|
10
16
|
const svgStyles = css({
|
|
11
17
|
lineHeight: 1,
|
|
@@ -31,7 +37,7 @@ const svgStyles = css({
|
|
|
31
37
|
display: "none", // We need to make sure that on hybrid pages the icons are not shown twice.
|
|
32
38
|
},
|
|
33
39
|
});
|
|
34
|
-
export const BlokIcon = forwardRef(function ContentHubIcon({ icon, classes, label, iconColor, iconColorShade = 500, iconBackgroundColor, iconBackgroundColorShade = 100, iconSize = "default", ignoreIconOverride = false, ...props }, ref) {
|
|
40
|
+
export const BlokIcon = forwardRef(function ContentHubIcon({ icon, classes, label, iconColor, iconColorShade = 500, iconBackgroundColor, iconBackgroundColorShade = 100, iconSize = "default", ignoreIconOverride = false, fontSize, ...props }, ref) {
|
|
35
41
|
const iconName = icon.replace("m-icon ", "").replace("m-icon-", "");
|
|
36
42
|
const fullIconName = `m-icon-${iconName}`;
|
|
37
43
|
const { inView, ref: inViewRef } = useInView();
|
|
@@ -46,6 +52,6 @@ export const BlokIcon = forwardRef(function ContentHubIcon({ icon, classes, labe
|
|
|
46
52
|
inViewRef(node);
|
|
47
53
|
}, className: cx("m-icon", classes, icon, iconColor ? colorByName(iconColor, iconColorShade) : null, iconBackgroundColor
|
|
48
54
|
? backgroundColorByName(iconBackgroundColor, iconBackgroundColorShade)
|
|
49
|
-
: null, iconSize === "small" ? smallIcon : undefined, svgStyles), ...props, "aria-label": label ?? fullIconName, "data-testid": fullIconName, dangerouslySetInnerHTML: { __html: svgIcon } }));
|
|
55
|
+
: null, iconSize === "small" ? smallIcon : undefined, iconSize === "extraSmall" ? extraSmallIcon : undefined, iconSize === "default" ? defaultIcon : undefined, svgStyles), ...props, style: fontSize ? { fontSize } : undefined, "aria-label": label ?? fullIconName, "data-testid": fullIconName, dangerouslySetInnerHTML: { __html: svgIcon } }));
|
|
50
56
|
});
|
|
51
57
|
//# sourceMappingURL=BlokIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAM,UAAU,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EACL,qBAAqB,EACrB,WAAW,
|
|
1
|
+
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":"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"}
|
package/esm/Foundations/sizes.js
CHANGED
|
@@ -22,8 +22,10 @@ export const sizes = {
|
|
|
22
22
|
"4xl": "2048px",
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
|
+
export const iconSizeExtraSmall = "16px";
|
|
25
26
|
export const iconSizeSmall = "20px";
|
|
26
27
|
export const iconSizeDefault = "22px";
|
|
28
|
+
export const iconSizeLarge = "48px";
|
|
27
29
|
export const gridImageHeight = 150;
|
|
28
30
|
export const modalFixedHeight = 600;
|
|
29
31
|
// Sidebar
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/Foundations/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC;AACpC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/Foundations/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC;AACpC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC;AAEpC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AACpC,UAAU;AACV,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;AAChC,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAEpC,QAAQ;AACR,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC;AACjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACxC,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAC3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AACpC,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAC;AAClD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AACpC,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,GAAG;CACX,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,0BAA0B,GAAG,QAAQ,CAAC;AACnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC"}
|