@commercetools-demo/puck-theme-manager 0.2.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +371 -328
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +339 -277
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -14
package/dist/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
|
|
30
20
|
// src/index.ts
|
|
@@ -44,17 +34,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
44
34
|
var import_react2 = require("react");
|
|
45
35
|
var import_react_router_dom = require("react-router-dom");
|
|
46
36
|
var import_puck_api = require("@commercetools-demo/puck-api");
|
|
47
|
-
var
|
|
48
|
-
var import_flat_button = __toESM(require("@commercetools-uikit/flat-button"));
|
|
49
|
-
var import_primary_button2 = __toESM(require("@commercetools-uikit/primary-button"));
|
|
50
|
-
var import_secondary_button = __toESM(require("@commercetools-uikit/secondary-button"));
|
|
51
|
-
var import_field_label2 = __toESM(require("@commercetools-uikit/field-label"));
|
|
52
|
-
var import_number_input = __toESM(require("@commercetools-uikit/number-input"));
|
|
53
|
-
var import_spacings2 = __toESM(require("@commercetools-uikit/spacings"));
|
|
54
|
-
var import_text = __toESM(require("@commercetools-uikit/text"));
|
|
55
|
-
var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
|
|
56
|
-
var import_loading_spinner = __toESM(require("@commercetools-uikit/loading-spinner"));
|
|
57
|
-
var import_grid = __toESM(require("@commercetools-uikit/grid"));
|
|
37
|
+
var import_nimbus3 = require("@commercetools/nimbus");
|
|
58
38
|
|
|
59
39
|
// src/constants.ts
|
|
60
40
|
var DEFAULT_THEME = {
|
|
@@ -87,11 +67,17 @@ var DEFAULT_THEME = {
|
|
|
87
67
|
backgroundStyle: "solid"
|
|
88
68
|
};
|
|
89
69
|
|
|
70
|
+
// src/EnsureNimbusProvider.tsx
|
|
71
|
+
var import_nimbus = require("@commercetools/nimbus");
|
|
72
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
73
|
+
var EnsureNimbusProvider = ({
|
|
74
|
+
locale = "en",
|
|
75
|
+
children
|
|
76
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nimbus.NimbusProvider, { locale, children });
|
|
77
|
+
|
|
90
78
|
// src/components/theme-preset-selector.tsx
|
|
91
79
|
var import_react = require("react");
|
|
92
|
-
var
|
|
93
|
-
var import_spacings = __toESM(require("@commercetools-uikit/spacings"));
|
|
94
|
-
var import_field_label = __toESM(require("@commercetools-uikit/field-label"));
|
|
80
|
+
var import_nimbus2 = require("@commercetools/nimbus");
|
|
95
81
|
|
|
96
82
|
// src/presets.ts
|
|
97
83
|
var flatTheme = {
|
|
@@ -570,7 +556,7 @@ function buildCssVars(tokens) {
|
|
|
570
556
|
}
|
|
571
557
|
|
|
572
558
|
// src/components/theme-preset-selector.tsx
|
|
573
|
-
var
|
|
559
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
574
560
|
var PRESET_OPTIONS = [
|
|
575
561
|
{ value: "", label: "Choose a preset\u2026" },
|
|
576
562
|
...PRESET_KEYS_SELECTOR.map((key) => ({
|
|
@@ -596,34 +582,107 @@ var ThemePresetSelector = ({
|
|
|
596
582
|
onSelectPreset(themePresets[selectedKey]);
|
|
597
583
|
}
|
|
598
584
|
};
|
|
599
|
-
return /* @__PURE__ */ (0,
|
|
600
|
-
/* @__PURE__ */ (0,
|
|
601
|
-
|
|
602
|
-
|
|
585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "column", gap: "200", children: [
|
|
586
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
587
|
+
"label",
|
|
588
|
+
{
|
|
589
|
+
htmlFor: "theme-preset-select",
|
|
590
|
+
style: { display: "block", marginBottom: 4, fontSize: 13, fontWeight: 600 },
|
|
591
|
+
children: "Quick apply preset"
|
|
592
|
+
}
|
|
593
|
+
),
|
|
594
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "row", gap: "200", alignItems: "center", children: [
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
603
596
|
"select",
|
|
604
597
|
{
|
|
605
598
|
id: "theme-preset-select",
|
|
606
599
|
value: selectedKey,
|
|
607
600
|
onChange: (e) => setSelectedKey(e.target.value),
|
|
608
601
|
style: SELECT_STYLE,
|
|
609
|
-
children: PRESET_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
602
|
+
children: PRESET_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
610
603
|
}
|
|
611
604
|
),
|
|
612
|
-
/* @__PURE__ */ (0,
|
|
613
|
-
import_primary_button.default,
|
|
614
|
-
{
|
|
615
|
-
label: "Apply",
|
|
616
|
-
onClick: handleApply,
|
|
617
|
-
isDisabled: !selectedKey
|
|
618
|
-
}
|
|
619
|
-
)
|
|
605
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "solid", onPress: handleApply, isDisabled: !selectedKey, children: "Apply" })
|
|
620
606
|
] })
|
|
621
607
|
] });
|
|
622
608
|
};
|
|
623
609
|
var theme_preset_selector_default = ThemePresetSelector;
|
|
624
610
|
|
|
625
611
|
// src/components/theme-editor.tsx
|
|
626
|
-
var
|
|
612
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
613
|
+
var SCALE_TO_GAP = {
|
|
614
|
+
xs: "100",
|
|
615
|
+
s: "200",
|
|
616
|
+
m: "400",
|
|
617
|
+
l: "600",
|
|
618
|
+
xl: "800"
|
|
619
|
+
};
|
|
620
|
+
var Spacings = {
|
|
621
|
+
Stack: ({ scale = "m", alignItems, justifyContent, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
622
|
+
import_nimbus3.Stack,
|
|
623
|
+
{
|
|
624
|
+
direction: "column",
|
|
625
|
+
gap: SCALE_TO_GAP[scale] ?? "400",
|
|
626
|
+
alignItems,
|
|
627
|
+
justifyContent,
|
|
628
|
+
children
|
|
629
|
+
}
|
|
630
|
+
),
|
|
631
|
+
Inline: ({ scale = "m", alignItems, justifyContent, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
632
|
+
import_nimbus3.Stack,
|
|
633
|
+
{
|
|
634
|
+
direction: "row",
|
|
635
|
+
gap: SCALE_TO_GAP[scale] ?? "400",
|
|
636
|
+
alignItems,
|
|
637
|
+
justifyContent,
|
|
638
|
+
children
|
|
639
|
+
}
|
|
640
|
+
)
|
|
641
|
+
};
|
|
642
|
+
var TONE_TO_COLOR = {
|
|
643
|
+
secondary: "neutral.11",
|
|
644
|
+
critical: "critical.11",
|
|
645
|
+
positive: "positive.11"
|
|
646
|
+
};
|
|
647
|
+
var Text = {
|
|
648
|
+
Headline: ({ as = "h2", children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Text, { as, fontSize: as === "h1" ? "2xl" : "xl", fontWeight: "700", children }),
|
|
649
|
+
Body: ({ tone, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Text, { color: tone ? TONE_TO_COLOR[tone] : void 0, children })
|
|
650
|
+
};
|
|
651
|
+
var Card = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Card.Root, { variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Card.Body, { children }) });
|
|
652
|
+
var Grid = Object.assign(
|
|
653
|
+
({
|
|
654
|
+
gridGap,
|
|
655
|
+
gridTemplateColumns,
|
|
656
|
+
gridAutoColumns,
|
|
657
|
+
children
|
|
658
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Grid, { gap: gridGap, templateColumns: gridTemplateColumns, autoColumns: gridAutoColumns, children }),
|
|
659
|
+
{
|
|
660
|
+
Item: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Grid.Item, { children })
|
|
661
|
+
}
|
|
662
|
+
);
|
|
663
|
+
var PrimaryButton = ({ label, onClick, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Button, { variant: "solid", onPress: onClick, isDisabled, children: label });
|
|
664
|
+
var SecondaryButton = ({ label, onClick, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.Button, { variant: "outline", onPress: onClick, isDisabled, children: label });
|
|
665
|
+
var FlatButton = ({ label, onClick, isDisabled, icon }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_nimbus3.Button, { variant: "ghost", onPress: onClick, isDisabled, children: [
|
|
666
|
+
icon,
|
|
667
|
+
label
|
|
668
|
+
] });
|
|
669
|
+
var FieldLabel = ({ title, htmlFor }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor, style: { display: "block", marginBottom: 4, fontSize: 13, fontWeight: 600 }, children: title });
|
|
670
|
+
var TextInput = ({ id, value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
671
|
+
import_nimbus3.TextInput,
|
|
672
|
+
{
|
|
673
|
+
id,
|
|
674
|
+
value: value == null ? "" : String(value),
|
|
675
|
+
onChange: (v) => onChange?.({ target: { value: v } })
|
|
676
|
+
}
|
|
677
|
+
);
|
|
678
|
+
var NumberInput = ({ id, value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
679
|
+
import_nimbus3.NumberInput,
|
|
680
|
+
{
|
|
681
|
+
id,
|
|
682
|
+
value: value == null || value === "" ? 0 : Number(value),
|
|
683
|
+
onChange: (n) => onChange?.({ target: { value: Number.isNaN(n) ? "" : String(n) } })
|
|
684
|
+
}
|
|
685
|
+
);
|
|
627
686
|
var BORDER_RADIUS_OPTIONS = [
|
|
628
687
|
{ value: "none", label: "None" },
|
|
629
688
|
{ value: "sm", label: "Small" },
|
|
@@ -809,11 +868,11 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
809
868
|
}
|
|
810
869
|
}, [theme, updateTheme, clearError]);
|
|
811
870
|
if (loading && theme == null) {
|
|
812
|
-
return /* @__PURE__ */ (0,
|
|
871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_nimbus3.LoadingSpinner, {}) });
|
|
813
872
|
}
|
|
814
|
-
return /* @__PURE__ */ (0,
|
|
815
|
-
backButton && /* @__PURE__ */ (0,
|
|
816
|
-
|
|
873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "l", children: [
|
|
874
|
+
backButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
875
|
+
FlatButton,
|
|
817
876
|
{
|
|
818
877
|
onClick: () => history.push("/"),
|
|
819
878
|
label: backButton.label,
|
|
@@ -821,19 +880,19 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
821
880
|
children: backButton.label
|
|
822
881
|
}
|
|
823
882
|
),
|
|
824
|
-
/* @__PURE__ */ (0,
|
|
825
|
-
/* @__PURE__ */ (0,
|
|
826
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "l", alignItems: "flex-start", children: [
|
|
884
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h1", children: "Theme" }),
|
|
885
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Body, { tone: "secondary", children: "Customize colors, typography, spacing, and component styles." })
|
|
827
886
|
] }) }),
|
|
828
|
-
error && /* @__PURE__ */ (0,
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
887
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "m", children: [
|
|
888
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Error" }),
|
|
889
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Body, { tone: "critical", children: error })
|
|
831
890
|
] }) }),
|
|
832
|
-
saveSuccess && /* @__PURE__ */ (0,
|
|
833
|
-
/* @__PURE__ */ (0,
|
|
834
|
-
/* @__PURE__ */ (0,
|
|
835
|
-
/* @__PURE__ */ (0,
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
891
|
+
saveSuccess && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Body, { tone: "positive", children: "Theme saved successfully." }),
|
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "l", children: [
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spacings.Inline, { scale: "s", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(theme_preset_selector_default, { onSelectPreset: applyThemeToForm }) }) }),
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "s", children: [
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
837
896
|
"button",
|
|
838
897
|
{
|
|
839
898
|
type: "button",
|
|
@@ -854,8 +913,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
854
913
|
background: "transparent"
|
|
855
914
|
},
|
|
856
915
|
children: [
|
|
857
|
-
/* @__PURE__ */ (0,
|
|
858
|
-
/* @__PURE__ */ (0,
|
|
916
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Theme configuration" }),
|
|
917
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
859
918
|
"span",
|
|
860
919
|
{
|
|
861
920
|
style: {
|
|
@@ -873,19 +932,19 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
873
932
|
]
|
|
874
933
|
}
|
|
875
934
|
) }),
|
|
876
|
-
isConfigExpanded && /* @__PURE__ */ (0,
|
|
877
|
-
/* @__PURE__ */ (0,
|
|
878
|
-
/* @__PURE__ */ (0,
|
|
879
|
-
|
|
935
|
+
isConfigExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spacings.Stack, { scale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Stack, { scale: "xl", children: [
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Colors" }),
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
938
|
+
Grid,
|
|
880
939
|
{
|
|
881
940
|
gridGap: "16px",
|
|
882
941
|
gridAutoColumns: "1fr",
|
|
883
942
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
884
943
|
children: [
|
|
885
|
-
/* @__PURE__ */ (0,
|
|
886
|
-
/* @__PURE__ */ (0,
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
888
|
-
/* @__PURE__ */ (0,
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Primary", htmlFor: "colorPrimary" }),
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
889
948
|
"input",
|
|
890
949
|
{
|
|
891
950
|
type: "color",
|
|
@@ -895,8 +954,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
895
954
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
896
955
|
}
|
|
897
956
|
),
|
|
898
|
-
/* @__PURE__ */ (0,
|
|
899
|
-
|
|
957
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
958
|
+
TextInput,
|
|
900
959
|
{
|
|
901
960
|
value: formValues.colorPrimary,
|
|
902
961
|
onChange: (e) => handleChange("colorPrimary", e.target.value),
|
|
@@ -905,16 +964,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
905
964
|
)
|
|
906
965
|
] })
|
|
907
966
|
] }) }),
|
|
908
|
-
/* @__PURE__ */ (0,
|
|
909
|
-
/* @__PURE__ */ (0,
|
|
910
|
-
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
969
|
+
FieldLabel,
|
|
911
970
|
{
|
|
912
971
|
title: "Primary Hover",
|
|
913
972
|
htmlFor: "colorPrimaryHover"
|
|
914
973
|
}
|
|
915
974
|
),
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
975
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
976
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
918
977
|
"input",
|
|
919
978
|
{
|
|
920
979
|
type: "color",
|
|
@@ -924,8 +983,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
924
983
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
925
984
|
}
|
|
926
985
|
),
|
|
927
|
-
/* @__PURE__ */ (0,
|
|
928
|
-
|
|
986
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
987
|
+
TextInput,
|
|
929
988
|
{
|
|
930
989
|
horizontalConstraint: 3,
|
|
931
990
|
value: formValues.colorPrimaryHover,
|
|
@@ -934,10 +993,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
934
993
|
)
|
|
935
994
|
] })
|
|
936
995
|
] }) }),
|
|
937
|
-
/* @__PURE__ */ (0,
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
939
|
-
/* @__PURE__ */ (0,
|
|
940
|
-
/* @__PURE__ */ (0,
|
|
996
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
997
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Secondary", htmlFor: "colorSecondary" }),
|
|
998
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
999
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
941
1000
|
"input",
|
|
942
1001
|
{
|
|
943
1002
|
type: "color",
|
|
@@ -947,8 +1006,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
947
1006
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
948
1007
|
}
|
|
949
1008
|
),
|
|
950
|
-
/* @__PURE__ */ (0,
|
|
951
|
-
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1010
|
+
TextInput,
|
|
952
1011
|
{
|
|
953
1012
|
horizontalConstraint: 3,
|
|
954
1013
|
value: formValues.colorSecondary,
|
|
@@ -957,16 +1016,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
957
1016
|
)
|
|
958
1017
|
] })
|
|
959
1018
|
] }) }),
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
962
|
-
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1020
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1021
|
+
FieldLabel,
|
|
963
1022
|
{
|
|
964
1023
|
title: "Background",
|
|
965
1024
|
htmlFor: "colorBackground"
|
|
966
1025
|
}
|
|
967
1026
|
),
|
|
968
|
-
/* @__PURE__ */ (0,
|
|
969
|
-
/* @__PURE__ */ (0,
|
|
1027
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1028
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
970
1029
|
"input",
|
|
971
1030
|
{
|
|
972
1031
|
type: "color",
|
|
@@ -976,8 +1035,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
976
1035
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
977
1036
|
}
|
|
978
1037
|
),
|
|
979
|
-
/* @__PURE__ */ (0,
|
|
980
|
-
|
|
1038
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1039
|
+
TextInput,
|
|
981
1040
|
{
|
|
982
1041
|
horizontalConstraint: 3,
|
|
983
1042
|
value: formValues.colorBackground,
|
|
@@ -986,10 +1045,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
986
1045
|
)
|
|
987
1046
|
] })
|
|
988
1047
|
] }) }),
|
|
989
|
-
/* @__PURE__ */ (0,
|
|
990
|
-
/* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
992
|
-
/* @__PURE__ */ (0,
|
|
1048
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Surface", htmlFor: "colorSurface" }),
|
|
1050
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1051
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
993
1052
|
"input",
|
|
994
1053
|
{
|
|
995
1054
|
type: "color",
|
|
@@ -999,8 +1058,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
999
1058
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1000
1059
|
}
|
|
1001
1060
|
),
|
|
1002
|
-
/* @__PURE__ */ (0,
|
|
1003
|
-
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1062
|
+
TextInput,
|
|
1004
1063
|
{
|
|
1005
1064
|
horizontalConstraint: 3,
|
|
1006
1065
|
value: formValues.colorSurface,
|
|
@@ -1009,10 +1068,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1009
1068
|
)
|
|
1010
1069
|
] })
|
|
1011
1070
|
] }) }),
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1013
|
-
/* @__PURE__ */ (0,
|
|
1014
|
-
/* @__PURE__ */ (0,
|
|
1015
|
-
/* @__PURE__ */ (0,
|
|
1071
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Text", htmlFor: "colorText" }),
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1016
1075
|
"input",
|
|
1017
1076
|
{
|
|
1018
1077
|
type: "color",
|
|
@@ -1022,8 +1081,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1022
1081
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1023
1082
|
}
|
|
1024
1083
|
),
|
|
1025
|
-
/* @__PURE__ */ (0,
|
|
1026
|
-
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1085
|
+
TextInput,
|
|
1027
1086
|
{
|
|
1028
1087
|
horizontalConstraint: 3,
|
|
1029
1088
|
value: formValues.colorText,
|
|
@@ -1032,10 +1091,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1032
1091
|
)
|
|
1033
1092
|
] })
|
|
1034
1093
|
] }) }),
|
|
1035
|
-
/* @__PURE__ */ (0,
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1094
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1095
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Text Muted", htmlFor: "colorTextMuted" }),
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1097
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1039
1098
|
"input",
|
|
1040
1099
|
{
|
|
1041
1100
|
type: "color",
|
|
@@ -1045,8 +1104,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1045
1104
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1046
1105
|
}
|
|
1047
1106
|
),
|
|
1048
|
-
/* @__PURE__ */ (0,
|
|
1049
|
-
|
|
1107
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1108
|
+
TextInput,
|
|
1050
1109
|
{
|
|
1051
1110
|
horizontalConstraint: 3,
|
|
1052
1111
|
value: formValues.colorTextMuted,
|
|
@@ -1058,25 +1117,25 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1058
1117
|
]
|
|
1059
1118
|
}
|
|
1060
1119
|
),
|
|
1061
|
-
/* @__PURE__ */ (0,
|
|
1062
|
-
/* @__PURE__ */ (0,
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Extended colors" }),
|
|
1121
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Body, { tone: "secondary", children: "Optional theme tokens for foregrounds, muted, destructive, accent, border, input, and ring." }),
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1123
|
+
Grid,
|
|
1065
1124
|
{
|
|
1066
1125
|
gridGap: "16px",
|
|
1067
1126
|
gridAutoColumns: "1fr",
|
|
1068
1127
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1069
1128
|
children: [
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
|
|
1129
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1131
|
+
FieldLabel,
|
|
1073
1132
|
{
|
|
1074
1133
|
title: "Primary Foreground",
|
|
1075
1134
|
htmlFor: "colorPrimaryForeground"
|
|
1076
1135
|
}
|
|
1077
1136
|
),
|
|
1078
|
-
/* @__PURE__ */ (0,
|
|
1079
|
-
/* @__PURE__ */ (0,
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1080
1139
|
"input",
|
|
1081
1140
|
{
|
|
1082
1141
|
type: "color",
|
|
@@ -1086,8 +1145,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1086
1145
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1087
1146
|
}
|
|
1088
1147
|
),
|
|
1089
|
-
/* @__PURE__ */ (0,
|
|
1090
|
-
|
|
1148
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1149
|
+
TextInput,
|
|
1091
1150
|
{
|
|
1092
1151
|
horizontalConstraint: 3,
|
|
1093
1152
|
value: formValues.colorPrimaryForeground ?? "",
|
|
@@ -1099,16 +1158,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1099
1158
|
)
|
|
1100
1159
|
] })
|
|
1101
1160
|
] }) }),
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
/* @__PURE__ */ (0,
|
|
1104
|
-
|
|
1161
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1162
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1163
|
+
FieldLabel,
|
|
1105
1164
|
{
|
|
1106
1165
|
title: "Secondary Foreground",
|
|
1107
1166
|
htmlFor: "colorSecondaryForeground"
|
|
1108
1167
|
}
|
|
1109
1168
|
),
|
|
1110
|
-
/* @__PURE__ */ (0,
|
|
1111
|
-
/* @__PURE__ */ (0,
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1112
1171
|
"input",
|
|
1113
1172
|
{
|
|
1114
1173
|
type: "color",
|
|
@@ -1118,8 +1177,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1118
1177
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1119
1178
|
}
|
|
1120
1179
|
),
|
|
1121
|
-
/* @__PURE__ */ (0,
|
|
1122
|
-
|
|
1180
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1181
|
+
TextInput,
|
|
1123
1182
|
{
|
|
1124
1183
|
horizontalConstraint: 3,
|
|
1125
1184
|
value: formValues.colorSecondaryForeground ?? "",
|
|
@@ -1131,10 +1190,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1131
1190
|
)
|
|
1132
1191
|
] })
|
|
1133
1192
|
] }) }),
|
|
1134
|
-
/* @__PURE__ */ (0,
|
|
1135
|
-
/* @__PURE__ */ (0,
|
|
1136
|
-
/* @__PURE__ */ (0,
|
|
1137
|
-
/* @__PURE__ */ (0,
|
|
1193
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1194
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Foreground", htmlFor: "colorForeground" }),
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1138
1197
|
"input",
|
|
1139
1198
|
{
|
|
1140
1199
|
type: "color",
|
|
@@ -1144,8 +1203,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1144
1203
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1145
1204
|
}
|
|
1146
1205
|
),
|
|
1147
|
-
/* @__PURE__ */ (0,
|
|
1148
|
-
|
|
1206
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1207
|
+
TextInput,
|
|
1149
1208
|
{
|
|
1150
1209
|
horizontalConstraint: 3,
|
|
1151
1210
|
value: formValues.colorForeground ?? "",
|
|
@@ -1157,10 +1216,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1157
1216
|
)
|
|
1158
1217
|
] })
|
|
1159
1218
|
] }) }),
|
|
1160
|
-
/* @__PURE__ */ (0,
|
|
1161
|
-
/* @__PURE__ */ (0,
|
|
1162
|
-
/* @__PURE__ */ (0,
|
|
1163
|
-
/* @__PURE__ */ (0,
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Muted", htmlFor: "colorMuted" }),
|
|
1221
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1222
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1164
1223
|
"input",
|
|
1165
1224
|
{
|
|
1166
1225
|
type: "color",
|
|
@@ -1170,8 +1229,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1170
1229
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1171
1230
|
}
|
|
1172
1231
|
),
|
|
1173
|
-
/* @__PURE__ */ (0,
|
|
1174
|
-
|
|
1232
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1233
|
+
TextInput,
|
|
1175
1234
|
{
|
|
1176
1235
|
horizontalConstraint: 3,
|
|
1177
1236
|
value: formValues.colorMuted ?? "",
|
|
@@ -1183,16 +1242,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1183
1242
|
)
|
|
1184
1243
|
] })
|
|
1185
1244
|
] }) }),
|
|
1186
|
-
/* @__PURE__ */ (0,
|
|
1187
|
-
/* @__PURE__ */ (0,
|
|
1188
|
-
|
|
1245
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1246
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1247
|
+
FieldLabel,
|
|
1189
1248
|
{
|
|
1190
1249
|
title: "Muted Foreground",
|
|
1191
1250
|
htmlFor: "colorMutedForeground"
|
|
1192
1251
|
}
|
|
1193
1252
|
),
|
|
1194
|
-
/* @__PURE__ */ (0,
|
|
1195
|
-
/* @__PURE__ */ (0,
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1196
1255
|
"input",
|
|
1197
1256
|
{
|
|
1198
1257
|
type: "color",
|
|
@@ -1202,8 +1261,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1202
1261
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1203
1262
|
}
|
|
1204
1263
|
),
|
|
1205
|
-
/* @__PURE__ */ (0,
|
|
1206
|
-
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1265
|
+
TextInput,
|
|
1207
1266
|
{
|
|
1208
1267
|
horizontalConstraint: 3,
|
|
1209
1268
|
value: formValues.colorMutedForeground ?? "",
|
|
@@ -1215,10 +1274,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1215
1274
|
)
|
|
1216
1275
|
] })
|
|
1217
1276
|
] }) }),
|
|
1218
|
-
/* @__PURE__ */ (0,
|
|
1219
|
-
/* @__PURE__ */ (0,
|
|
1220
|
-
/* @__PURE__ */ (0,
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Destructive", htmlFor: "colorDestructive" }),
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1280
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1222
1281
|
"input",
|
|
1223
1282
|
{
|
|
1224
1283
|
type: "color",
|
|
@@ -1228,8 +1287,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1228
1287
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1229
1288
|
}
|
|
1230
1289
|
),
|
|
1231
|
-
/* @__PURE__ */ (0,
|
|
1232
|
-
|
|
1290
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1291
|
+
TextInput,
|
|
1233
1292
|
{
|
|
1234
1293
|
horizontalConstraint: 3,
|
|
1235
1294
|
value: formValues.colorDestructive ?? "",
|
|
@@ -1241,16 +1300,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1241
1300
|
)
|
|
1242
1301
|
] })
|
|
1243
1302
|
] }) }),
|
|
1244
|
-
/* @__PURE__ */ (0,
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1246
|
-
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1305
|
+
FieldLabel,
|
|
1247
1306
|
{
|
|
1248
1307
|
title: "Destructive Foreground",
|
|
1249
1308
|
htmlFor: "colorDestructiveForeground"
|
|
1250
1309
|
}
|
|
1251
1310
|
),
|
|
1252
|
-
/* @__PURE__ */ (0,
|
|
1253
|
-
/* @__PURE__ */ (0,
|
|
1311
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1312
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1254
1313
|
"input",
|
|
1255
1314
|
{
|
|
1256
1315
|
type: "color",
|
|
@@ -1260,8 +1319,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1260
1319
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1261
1320
|
}
|
|
1262
1321
|
),
|
|
1263
|
-
/* @__PURE__ */ (0,
|
|
1264
|
-
|
|
1322
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1323
|
+
TextInput,
|
|
1265
1324
|
{
|
|
1266
1325
|
horizontalConstraint: 3,
|
|
1267
1326
|
value: formValues.colorDestructiveForeground ?? "",
|
|
@@ -1273,10 +1332,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1273
1332
|
)
|
|
1274
1333
|
] })
|
|
1275
1334
|
] }) }),
|
|
1276
|
-
/* @__PURE__ */ (0,
|
|
1277
|
-
/* @__PURE__ */ (0,
|
|
1278
|
-
/* @__PURE__ */ (0,
|
|
1279
|
-
/* @__PURE__ */ (0,
|
|
1335
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1336
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Accent", htmlFor: "colorAccent" }),
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1338
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1280
1339
|
"input",
|
|
1281
1340
|
{
|
|
1282
1341
|
type: "color",
|
|
@@ -1286,8 +1345,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1286
1345
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1287
1346
|
}
|
|
1288
1347
|
),
|
|
1289
|
-
/* @__PURE__ */ (0,
|
|
1290
|
-
|
|
1348
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1349
|
+
TextInput,
|
|
1291
1350
|
{
|
|
1292
1351
|
horizontalConstraint: 3,
|
|
1293
1352
|
value: formValues.colorAccent ?? "",
|
|
@@ -1299,16 +1358,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1299
1358
|
)
|
|
1300
1359
|
] })
|
|
1301
1360
|
] }) }),
|
|
1302
|
-
/* @__PURE__ */ (0,
|
|
1303
|
-
/* @__PURE__ */ (0,
|
|
1304
|
-
|
|
1361
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1362
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1363
|
+
FieldLabel,
|
|
1305
1364
|
{
|
|
1306
1365
|
title: "Accent Foreground",
|
|
1307
1366
|
htmlFor: "colorAccentForeground"
|
|
1308
1367
|
}
|
|
1309
1368
|
),
|
|
1310
|
-
/* @__PURE__ */ (0,
|
|
1311
|
-
/* @__PURE__ */ (0,
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1312
1371
|
"input",
|
|
1313
1372
|
{
|
|
1314
1373
|
type: "color",
|
|
@@ -1318,8 +1377,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1318
1377
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1319
1378
|
}
|
|
1320
1379
|
),
|
|
1321
|
-
/* @__PURE__ */ (0,
|
|
1322
|
-
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1381
|
+
TextInput,
|
|
1323
1382
|
{
|
|
1324
1383
|
horizontalConstraint: 3,
|
|
1325
1384
|
value: formValues.colorAccentForeground ?? "",
|
|
@@ -1331,10 +1390,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1331
1390
|
)
|
|
1332
1391
|
] })
|
|
1333
1392
|
] }) }),
|
|
1334
|
-
/* @__PURE__ */ (0,
|
|
1335
|
-
/* @__PURE__ */ (0,
|
|
1336
|
-
/* @__PURE__ */ (0,
|
|
1337
|
-
/* @__PURE__ */ (0,
|
|
1393
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Border", htmlFor: "colorBorder" }),
|
|
1395
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1396
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1338
1397
|
"input",
|
|
1339
1398
|
{
|
|
1340
1399
|
type: "color",
|
|
@@ -1344,8 +1403,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1344
1403
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1345
1404
|
}
|
|
1346
1405
|
),
|
|
1347
|
-
/* @__PURE__ */ (0,
|
|
1348
|
-
|
|
1406
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1407
|
+
TextInput,
|
|
1349
1408
|
{
|
|
1350
1409
|
horizontalConstraint: 3,
|
|
1351
1410
|
value: formValues.colorBorder ?? "",
|
|
@@ -1357,10 +1416,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1357
1416
|
)
|
|
1358
1417
|
] })
|
|
1359
1418
|
] }) }),
|
|
1360
|
-
/* @__PURE__ */ (0,
|
|
1361
|
-
/* @__PURE__ */ (0,
|
|
1362
|
-
/* @__PURE__ */ (0,
|
|
1363
|
-
/* @__PURE__ */ (0,
|
|
1419
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1420
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Input", htmlFor: "colorInput" }),
|
|
1421
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1364
1423
|
"input",
|
|
1365
1424
|
{
|
|
1366
1425
|
type: "color",
|
|
@@ -1370,8 +1429,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1370
1429
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1371
1430
|
}
|
|
1372
1431
|
),
|
|
1373
|
-
/* @__PURE__ */ (0,
|
|
1374
|
-
|
|
1432
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1433
|
+
TextInput,
|
|
1375
1434
|
{
|
|
1376
1435
|
horizontalConstraint: 3,
|
|
1377
1436
|
value: formValues.colorInput ?? "",
|
|
@@ -1383,10 +1442,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1383
1442
|
)
|
|
1384
1443
|
] })
|
|
1385
1444
|
] }) }),
|
|
1386
|
-
/* @__PURE__ */ (0,
|
|
1387
|
-
/* @__PURE__ */ (0,
|
|
1388
|
-
/* @__PURE__ */ (0,
|
|
1389
|
-
/* @__PURE__ */ (0,
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1446
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Ring", htmlFor: "colorRing" }),
|
|
1447
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1390
1449
|
"input",
|
|
1391
1450
|
{
|
|
1392
1451
|
type: "color",
|
|
@@ -1396,8 +1455,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1396
1455
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1397
1456
|
}
|
|
1398
1457
|
),
|
|
1399
|
-
/* @__PURE__ */ (0,
|
|
1400
|
-
|
|
1458
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1459
|
+
TextInput,
|
|
1401
1460
|
{
|
|
1402
1461
|
horizontalConstraint: 3,
|
|
1403
1462
|
value: formValues.colorRing ?? "",
|
|
@@ -1412,18 +1471,18 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1412
1471
|
]
|
|
1413
1472
|
}
|
|
1414
1473
|
),
|
|
1415
|
-
/* @__PURE__ */ (0,
|
|
1416
|
-
/* @__PURE__ */ (0,
|
|
1417
|
-
|
|
1474
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Typography" }),
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1476
|
+
Grid,
|
|
1418
1477
|
{
|
|
1419
1478
|
gridGap: "16px",
|
|
1420
1479
|
gridAutoColumns: "1fr",
|
|
1421
1480
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1422
1481
|
children: [
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1424
|
-
/* @__PURE__ */ (0,
|
|
1425
|
-
/* @__PURE__ */ (0,
|
|
1426
|
-
|
|
1482
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1483
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Font Family", htmlFor: "fontFamily" }),
|
|
1484
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1485
|
+
TextInput,
|
|
1427
1486
|
{
|
|
1428
1487
|
horizontalConstraint: 4,
|
|
1429
1488
|
id: "fontFamily",
|
|
@@ -1432,10 +1491,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1432
1491
|
}
|
|
1433
1492
|
)
|
|
1434
1493
|
] }) }),
|
|
1435
|
-
/* @__PURE__ */ (0,
|
|
1436
|
-
/* @__PURE__ */ (0,
|
|
1437
|
-
/* @__PURE__ */ (0,
|
|
1438
|
-
|
|
1494
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1495
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Heading Font", htmlFor: "fontHeading" }),
|
|
1496
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1497
|
+
TextInput,
|
|
1439
1498
|
{
|
|
1440
1499
|
horizontalConstraint: 4,
|
|
1441
1500
|
id: "fontHeading",
|
|
@@ -1447,18 +1506,18 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1447
1506
|
]
|
|
1448
1507
|
}
|
|
1449
1508
|
),
|
|
1450
|
-
/* @__PURE__ */ (0,
|
|
1451
|
-
/* @__PURE__ */ (0,
|
|
1452
|
-
|
|
1509
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Layout & Components" }),
|
|
1510
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1511
|
+
Grid,
|
|
1453
1512
|
{
|
|
1454
1513
|
gridGap: "16px",
|
|
1455
1514
|
gridAutoColumns: "1fr",
|
|
1456
1515
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1457
1516
|
children: [
|
|
1458
|
-
/* @__PURE__ */ (0,
|
|
1459
|
-
/* @__PURE__ */ (0,
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1461
|
-
|
|
1517
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1518
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Spacing Scale", htmlFor: "spacingScale" }),
|
|
1519
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1520
|
+
NumberInput,
|
|
1462
1521
|
{
|
|
1463
1522
|
id: "spacingScale",
|
|
1464
1523
|
horizontalConstraint: 3,
|
|
@@ -1470,9 +1529,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1470
1529
|
}
|
|
1471
1530
|
)
|
|
1472
1531
|
] }) }),
|
|
1473
|
-
/* @__PURE__ */ (0,
|
|
1474
|
-
/* @__PURE__ */ (0,
|
|
1475
|
-
/* @__PURE__ */ (0,
|
|
1532
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Border Radius", htmlFor: "borderRadius" }),
|
|
1534
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1476
1535
|
"select",
|
|
1477
1536
|
{
|
|
1478
1537
|
id: "borderRadius",
|
|
@@ -1482,13 +1541,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1482
1541
|
e.target.value
|
|
1483
1542
|
),
|
|
1484
1543
|
style: SELECT_STYLE2,
|
|
1485
|
-
children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1544
|
+
children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1486
1545
|
}
|
|
1487
1546
|
)
|
|
1488
1547
|
] }) }),
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1490
|
-
/* @__PURE__ */ (0,
|
|
1491
|
-
/* @__PURE__ */ (0,
|
|
1548
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1549
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Border Width", htmlFor: "borderWidth" }),
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1492
1551
|
"select",
|
|
1493
1552
|
{
|
|
1494
1553
|
id: "borderWidth",
|
|
@@ -1498,13 +1557,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1498
1557
|
e.target.value
|
|
1499
1558
|
),
|
|
1500
1559
|
style: SELECT_STYLE2,
|
|
1501
|
-
children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1560
|
+
children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1502
1561
|
}
|
|
1503
1562
|
)
|
|
1504
1563
|
] }) }),
|
|
1505
|
-
/* @__PURE__ */ (0,
|
|
1506
|
-
/* @__PURE__ */ (0,
|
|
1507
|
-
/* @__PURE__ */ (0,
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1565
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Button Style", htmlFor: "buttonStyle" }),
|
|
1566
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1508
1567
|
"select",
|
|
1509
1568
|
{
|
|
1510
1569
|
id: "buttonStyle",
|
|
@@ -1514,13 +1573,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1514
1573
|
e.target.value
|
|
1515
1574
|
),
|
|
1516
1575
|
style: SELECT_STYLE2,
|
|
1517
|
-
children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1576
|
+
children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1518
1577
|
}
|
|
1519
1578
|
)
|
|
1520
1579
|
] }) }),
|
|
1521
|
-
/* @__PURE__ */ (0,
|
|
1522
|
-
/* @__PURE__ */ (0,
|
|
1523
|
-
/* @__PURE__ */ (0,
|
|
1580
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1581
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Card Shadow", htmlFor: "cardShadow" }),
|
|
1582
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1524
1583
|
"select",
|
|
1525
1584
|
{
|
|
1526
1585
|
id: "cardShadow",
|
|
@@ -1530,13 +1589,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1530
1589
|
e.target.value
|
|
1531
1590
|
),
|
|
1532
1591
|
style: SELECT_STYLE2,
|
|
1533
|
-
children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1592
|
+
children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1534
1593
|
}
|
|
1535
1594
|
)
|
|
1536
1595
|
] }) }),
|
|
1537
|
-
/* @__PURE__ */ (0,
|
|
1538
|
-
/* @__PURE__ */ (0,
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1597
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Header Style", htmlFor: "headerStyle" }),
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1540
1599
|
"select",
|
|
1541
1600
|
{
|
|
1542
1601
|
id: "headerStyle",
|
|
@@ -1546,25 +1605,25 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1546
1605
|
e.target.value
|
|
1547
1606
|
),
|
|
1548
1607
|
style: SELECT_STYLE2,
|
|
1549
|
-
children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1608
|
+
children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1550
1609
|
}
|
|
1551
1610
|
)
|
|
1552
1611
|
] }) })
|
|
1553
1612
|
]
|
|
1554
1613
|
}
|
|
1555
1614
|
),
|
|
1556
|
-
/* @__PURE__ */ (0,
|
|
1557
|
-
/* @__PURE__ */ (0,
|
|
1558
|
-
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Shadow & surface" }),
|
|
1616
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1617
|
+
Grid,
|
|
1559
1618
|
{
|
|
1560
1619
|
gridGap: "16px",
|
|
1561
1620
|
gridAutoColumns: "1fr",
|
|
1562
1621
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1563
1622
|
children: [
|
|
1564
|
-
/* @__PURE__ */ (0,
|
|
1565
|
-
/* @__PURE__ */ (0,
|
|
1566
|
-
/* @__PURE__ */ (0,
|
|
1567
|
-
/* @__PURE__ */ (0,
|
|
1623
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Shadow Light", htmlFor: "colorShadowLight" }),
|
|
1625
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1626
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1568
1627
|
"input",
|
|
1569
1628
|
{
|
|
1570
1629
|
type: "color",
|
|
@@ -1574,8 +1633,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1574
1633
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1575
1634
|
}
|
|
1576
1635
|
),
|
|
1577
|
-
/* @__PURE__ */ (0,
|
|
1578
|
-
|
|
1636
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1637
|
+
TextInput,
|
|
1579
1638
|
{
|
|
1580
1639
|
horizontalConstraint: 3,
|
|
1581
1640
|
value: formValues.colorShadowLight ?? "",
|
|
@@ -1587,10 +1646,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1587
1646
|
)
|
|
1588
1647
|
] })
|
|
1589
1648
|
] }) }),
|
|
1590
|
-
/* @__PURE__ */ (0,
|
|
1591
|
-
/* @__PURE__ */ (0,
|
|
1592
|
-
/* @__PURE__ */ (0,
|
|
1593
|
-
/* @__PURE__ */ (0,
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Shadow Dark", htmlFor: "colorShadowDark" }),
|
|
1651
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1594
1653
|
"input",
|
|
1595
1654
|
{
|
|
1596
1655
|
type: "color",
|
|
@@ -1600,8 +1659,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1600
1659
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1601
1660
|
}
|
|
1602
1661
|
),
|
|
1603
|
-
/* @__PURE__ */ (0,
|
|
1604
|
-
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1663
|
+
TextInput,
|
|
1605
1664
|
{
|
|
1606
1665
|
horizontalConstraint: 3,
|
|
1607
1666
|
value: formValues.colorShadowDark ?? "",
|
|
@@ -1613,10 +1672,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1613
1672
|
)
|
|
1614
1673
|
] })
|
|
1615
1674
|
] }) }),
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1618
|
-
/* @__PURE__ */ (0,
|
|
1619
|
-
|
|
1675
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1676
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Surface Glass", htmlFor: "colorSurfaceGlass" }),
|
|
1677
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1678
|
+
TextInput,
|
|
1620
1679
|
{
|
|
1621
1680
|
horizontalConstraint: 3,
|
|
1622
1681
|
id: "colorSurfaceGlass",
|
|
@@ -1628,9 +1687,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1628
1687
|
}
|
|
1629
1688
|
)
|
|
1630
1689
|
] }) }),
|
|
1631
|
-
/* @__PURE__ */ (0,
|
|
1632
|
-
/* @__PURE__ */ (0,
|
|
1633
|
-
/* @__PURE__ */ (0,
|
|
1690
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1691
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Shadow Style", htmlFor: "shadowStyle" }),
|
|
1692
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1634
1693
|
"select",
|
|
1635
1694
|
{
|
|
1636
1695
|
id: "shadowStyle",
|
|
@@ -1640,13 +1699,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1640
1699
|
e.target.value
|
|
1641
1700
|
),
|
|
1642
1701
|
style: SELECT_STYLE2,
|
|
1643
|
-
children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1702
|
+
children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1644
1703
|
}
|
|
1645
1704
|
)
|
|
1646
1705
|
] }) }),
|
|
1647
|
-
/* @__PURE__ */ (0,
|
|
1648
|
-
/* @__PURE__ */ (0,
|
|
1649
|
-
/* @__PURE__ */ (0,
|
|
1706
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1707
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Surface Blur", htmlFor: "surfaceBlur" }),
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1650
1709
|
"select",
|
|
1651
1710
|
{
|
|
1652
1711
|
id: "surfaceBlur",
|
|
@@ -1656,14 +1715,14 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1656
1715
|
e.target.value
|
|
1657
1716
|
),
|
|
1658
1717
|
style: SELECT_STYLE2,
|
|
1659
|
-
children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1718
|
+
children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1660
1719
|
}
|
|
1661
1720
|
)
|
|
1662
1721
|
] }) }),
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
/* @__PURE__ */ (0,
|
|
1665
|
-
/* @__PURE__ */ (0,
|
|
1666
|
-
|
|
1722
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1723
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Surface Opacity", htmlFor: "surfaceOpacity" }),
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1725
|
+
NumberInput,
|
|
1667
1726
|
{
|
|
1668
1727
|
id: "surfaceOpacity",
|
|
1669
1728
|
horizontalConstraint: 3,
|
|
@@ -1675,9 +1734,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1675
1734
|
}
|
|
1676
1735
|
)
|
|
1677
1736
|
] }) }),
|
|
1678
|
-
/* @__PURE__ */ (0,
|
|
1679
|
-
/* @__PURE__ */ (0,
|
|
1680
|
-
/* @__PURE__ */ (0,
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1738
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Border Style", htmlFor: "borderStyle" }),
|
|
1739
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1681
1740
|
"select",
|
|
1682
1741
|
{
|
|
1683
1742
|
id: "borderStyle",
|
|
@@ -1687,13 +1746,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1687
1746
|
e.target.value
|
|
1688
1747
|
),
|
|
1689
1748
|
style: SELECT_STYLE2,
|
|
1690
|
-
children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1749
|
+
children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1691
1750
|
}
|
|
1692
1751
|
)
|
|
1693
1752
|
] }) }),
|
|
1694
|
-
/* @__PURE__ */ (0,
|
|
1695
|
-
/* @__PURE__ */ (0,
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1753
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1754
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Background Style", htmlFor: "backgroundStyle" }),
|
|
1755
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1697
1756
|
"select",
|
|
1698
1757
|
{
|
|
1699
1758
|
id: "backgroundStyle",
|
|
@@ -1703,24 +1762,24 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1703
1762
|
e.target.value
|
|
1704
1763
|
),
|
|
1705
1764
|
style: SELECT_STYLE2,
|
|
1706
|
-
children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1765
|
+
children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1707
1766
|
}
|
|
1708
1767
|
)
|
|
1709
1768
|
] }) })
|
|
1710
1769
|
]
|
|
1711
1770
|
}
|
|
1712
1771
|
),
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
1714
|
-
/* @__PURE__ */ (0,
|
|
1715
|
-
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text.Headline, { as: "h2", children: "Typography (weight & transform)" }),
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1774
|
+
Grid,
|
|
1716
1775
|
{
|
|
1717
1776
|
gridGap: "16px",
|
|
1718
1777
|
gridAutoColumns: "1fr",
|
|
1719
1778
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1720
1779
|
children: [
|
|
1721
|
-
/* @__PURE__ */ (0,
|
|
1722
|
-
/* @__PURE__ */ (0,
|
|
1723
|
-
/* @__PURE__ */ (0,
|
|
1780
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Font Weight Base", htmlFor: "fontWeightBase" }),
|
|
1782
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1724
1783
|
"select",
|
|
1725
1784
|
{
|
|
1726
1785
|
id: "fontWeightBase",
|
|
@@ -1730,13 +1789,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1730
1789
|
e.target.value
|
|
1731
1790
|
),
|
|
1732
1791
|
style: SELECT_STYLE2,
|
|
1733
|
-
children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1792
|
+
children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1734
1793
|
}
|
|
1735
1794
|
)
|
|
1736
1795
|
] }) }),
|
|
1737
|
-
/* @__PURE__ */ (0,
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1796
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1797
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Font Weight Heading", htmlFor: "fontWeightHeading" }),
|
|
1798
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1740
1799
|
"select",
|
|
1741
1800
|
{
|
|
1742
1801
|
id: "fontWeightHeading",
|
|
@@ -1746,13 +1805,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1746
1805
|
e.target.value
|
|
1747
1806
|
),
|
|
1748
1807
|
style: SELECT_STYLE2,
|
|
1749
|
-
children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1808
|
+
children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1750
1809
|
}
|
|
1751
1810
|
)
|
|
1752
1811
|
] }) }),
|
|
1753
|
-
/* @__PURE__ */ (0,
|
|
1754
|
-
/* @__PURE__ */ (0,
|
|
1755
|
-
/* @__PURE__ */ (0,
|
|
1812
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1813
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Letter Spacing", htmlFor: "letterSpacing" }),
|
|
1814
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1756
1815
|
"select",
|
|
1757
1816
|
{
|
|
1758
1817
|
id: "letterSpacing",
|
|
@@ -1762,13 +1821,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1762
1821
|
e.target.value
|
|
1763
1822
|
),
|
|
1764
1823
|
style: SELECT_STYLE2,
|
|
1765
|
-
children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1824
|
+
children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1766
1825
|
}
|
|
1767
1826
|
)
|
|
1768
1827
|
] }) }),
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1771
|
-
/* @__PURE__ */ (0,
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Grid.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { title: "Text Transform", htmlFor: "textTransform" }),
|
|
1830
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1772
1831
|
"select",
|
|
1773
1832
|
{
|
|
1774
1833
|
id: "textTransform",
|
|
@@ -1778,24 +1837,24 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1778
1837
|
e.target.value
|
|
1779
1838
|
),
|
|
1780
1839
|
style: SELECT_STYLE2,
|
|
1781
|
-
children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */ (0,
|
|
1840
|
+
children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
1782
1841
|
}
|
|
1783
1842
|
)
|
|
1784
1843
|
] }) })
|
|
1785
1844
|
]
|
|
1786
1845
|
}
|
|
1787
1846
|
),
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
1789
|
-
/* @__PURE__ */ (0,
|
|
1790
|
-
|
|
1847
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Spacings.Inline, { children: [
|
|
1848
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1849
|
+
PrimaryButton,
|
|
1791
1850
|
{
|
|
1792
1851
|
label: saving ? "Saving\u2026" : "Save",
|
|
1793
1852
|
onClick: handleSave,
|
|
1794
1853
|
isDisabled: saving
|
|
1795
1854
|
}
|
|
1796
1855
|
),
|
|
1797
|
-
/* @__PURE__ */ (0,
|
|
1798
|
-
|
|
1856
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1857
|
+
SecondaryButton,
|
|
1799
1858
|
{
|
|
1800
1859
|
label: "Reset to default",
|
|
1801
1860
|
onClick: handleResetToDefault,
|
|
@@ -1814,14 +1873,14 @@ var ThemeManager = ({
|
|
|
1814
1873
|
businessUnitKey,
|
|
1815
1874
|
jwtToken,
|
|
1816
1875
|
...innerProps
|
|
1817
|
-
}) => /* @__PURE__ */ (0,
|
|
1876
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1818
1877
|
import_puck_api.PuckApiProvider,
|
|
1819
1878
|
{
|
|
1820
1879
|
baseURL,
|
|
1821
1880
|
projectKey,
|
|
1822
1881
|
businessUnitKey,
|
|
1823
1882
|
jwtToken,
|
|
1824
|
-
children: /* @__PURE__ */ (0,
|
|
1883
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EnsureNimbusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeEditorInner, { ...innerProps }) })
|
|
1825
1884
|
}
|
|
1826
1885
|
);
|
|
1827
1886
|
var theme_editor_default = ThemeManager;
|
|
@@ -1830,12 +1889,8 @@ var theme_editor_default = ThemeManager;
|
|
|
1830
1889
|
var import_react3 = require("react");
|
|
1831
1890
|
var import_react_router_dom2 = require("react-router-dom");
|
|
1832
1891
|
var import_puck_api2 = require("@commercetools-demo/puck-api");
|
|
1833
|
-
var
|
|
1834
|
-
var
|
|
1835
|
-
var import_primary_button3 = __toESM(require("@commercetools-uikit/primary-button"));
|
|
1836
|
-
var import_spacings3 = __toESM(require("@commercetools-uikit/spacings"));
|
|
1837
|
-
var import_text2 = __toESM(require("@commercetools-uikit/text"));
|
|
1838
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1892
|
+
var import_nimbus4 = require("@commercetools/nimbus");
|
|
1893
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1839
1894
|
var ImportContentTypesInner = ({ backButton }) => {
|
|
1840
1895
|
const history = (0, import_react_router_dom2.useHistory)();
|
|
1841
1896
|
const { importDefaultContentTypes, loading, error, clearError } = (0, import_puck_api2.usePuckContentType)();
|
|
@@ -1856,55 +1911,43 @@ var ImportContentTypesInner = ({ backButton }) => {
|
|
|
1856
1911
|
} catch {
|
|
1857
1912
|
}
|
|
1858
1913
|
}, [importDefaultContentTypes, clearError]);
|
|
1859
|
-
return /* @__PURE__ */ (0,
|
|
1860
|
-
backButton && /* @__PURE__ */ (0,
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
/* @__PURE__ */ (0,
|
|
1871
|
-
|
|
1872
|
-
/* @__PURE__ */ (0,
|
|
1873
|
-
/* @__PURE__ */ (0,
|
|
1874
|
-
] }) }),
|
|
1875
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_spacings3.default.Inline, { scale: "m", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1876
|
-
import_primary_button3.default,
|
|
1877
|
-
{
|
|
1878
|
-
label: loading ? "Importing\u2026" : "Import default content types",
|
|
1879
|
-
onClick: handleImport,
|
|
1880
|
-
isDisabled: loading
|
|
1881
|
-
}
|
|
1882
|
-
) }),
|
|
1883
|
-
result && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_card2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "m", children: [
|
|
1884
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Headline, { as: "h2", children: "Result" }),
|
|
1885
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_text2.default.Body, { children: [
|
|
1914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Stack, { direction: "column", gap: "600", children: [
|
|
1915
|
+
backButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Button, { variant: "ghost", onPress: handleBack, children: [
|
|
1916
|
+
backButton.icon,
|
|
1917
|
+
backButton.label
|
|
1918
|
+
] }),
|
|
1919
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { as: "h1", fontSize: "2xl", fontWeight: "700", children: "Import default content types" }),
|
|
1920
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { color: "neutral.11", children: "Import default content type definitions from samples. Existing content types with the same key may be skipped or cause errors." }),
|
|
1921
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Card.Root, { variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Stack, { direction: "column", gap: "400", children: [
|
|
1922
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { as: "h2", fontSize: "xl", fontWeight: "700", children: "Error" }),
|
|
1923
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { color: "critical.11", children: error })
|
|
1924
|
+
] }) }) }),
|
|
1925
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Stack, { direction: "row", gap: "400", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Button, { variant: "solid", onPress: handleImport, isDisabled: loading, children: loading ? "Importing\u2026" : "Import default content types" }) }),
|
|
1926
|
+
result && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Card.Root, { variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Stack, { direction: "column", gap: "400", children: [
|
|
1927
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { as: "h2", fontSize: "xl", fontWeight: "700", children: "Result" }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Text, { children: [
|
|
1886
1929
|
"Imported: ",
|
|
1887
1930
|
result.imported.length,
|
|
1888
1931
|
" content type",
|
|
1889
1932
|
result.imported.length !== 1 ? "s" : "",
|
|
1890
1933
|
"."
|
|
1891
1934
|
] }),
|
|
1892
|
-
result.imported.length > 0 && /* @__PURE__ */ (0,
|
|
1893
|
-
result.failed.length > 0 && /* @__PURE__ */ (0,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1935
|
+
result.imported.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Text, { color: "neutral.11", children: result.imported.join(", ") }),
|
|
1936
|
+
result.failed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
1937
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Text, { color: "critical.11", children: [
|
|
1895
1938
|
"Failed: ",
|
|
1896
1939
|
result.failed.length,
|
|
1897
1940
|
" content type",
|
|
1898
1941
|
result.failed.length !== 1 ? "s" : "",
|
|
1899
1942
|
"."
|
|
1900
1943
|
] }),
|
|
1901
|
-
/* @__PURE__ */ (0,
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_nimbus4.Stack, { direction: "column", gap: "200", children: result.failed.map(({ key, error: err }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_nimbus4.Text, { color: "critical.11", children: [
|
|
1902
1945
|
key,
|
|
1903
1946
|
": ",
|
|
1904
1947
|
err
|
|
1905
1948
|
] }, key)) })
|
|
1906
1949
|
] })
|
|
1907
|
-
] }) })
|
|
1950
|
+
] }) }) })
|
|
1908
1951
|
] });
|
|
1909
1952
|
};
|
|
1910
1953
|
var ImportContentTypes = ({
|
|
@@ -1913,14 +1956,14 @@ var ImportContentTypes = ({
|
|
|
1913
1956
|
businessUnitKey,
|
|
1914
1957
|
jwtToken,
|
|
1915
1958
|
...innerProps
|
|
1916
|
-
}) => /* @__PURE__ */ (0,
|
|
1959
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1917
1960
|
import_puck_api2.PuckApiProvider,
|
|
1918
1961
|
{
|
|
1919
1962
|
baseURL,
|
|
1920
1963
|
projectKey,
|
|
1921
1964
|
businessUnitKey,
|
|
1922
1965
|
jwtToken,
|
|
1923
|
-
children: /* @__PURE__ */ (0,
|
|
1966
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EnsureNimbusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImportContentTypesInner, { ...innerProps }) })
|
|
1924
1967
|
}
|
|
1925
1968
|
);
|
|
1926
1969
|
var import_content_types_default = ImportContentTypes;
|