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