@commercetools-demo/puck-theme-manager 0.1.0 → 0.1.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.
Files changed (5) hide show
  1. package/dist/index.js +61 -47
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +61 -47
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -3
package/dist/index.mjs CHANGED
@@ -8,7 +8,6 @@ import PrimaryButton2 from "@commercetools-uikit/primary-button";
8
8
  import SecondaryButton from "@commercetools-uikit/secondary-button";
9
9
  import FieldLabel2 from "@commercetools-uikit/field-label";
10
10
  import NumberInput from "@commercetools-uikit/number-input";
11
- import SelectInput2 from "@commercetools-uikit/select-input";
12
11
  import Spacings2 from "@commercetools-uikit/spacings";
13
12
  import Text from "@commercetools-uikit/text";
14
13
  import TextInput from "@commercetools-uikit/text-input";
@@ -49,7 +48,6 @@ var DEFAULT_THEME = {
49
48
  // src/components/theme-preset-selector.tsx
50
49
  import { useState } from "react";
51
50
  import PrimaryButton from "@commercetools-uikit/primary-button";
52
- import SelectInput from "@commercetools-uikit/select-input";
53
51
  import Spacings from "@commercetools-uikit/spacings";
54
52
  import FieldLabel from "@commercetools-uikit/field-label";
55
53
 
@@ -538,6 +536,15 @@ var PRESET_OPTIONS = [
538
536
  label: paradigmLabels[key]
539
537
  }))
540
538
  ];
539
+ var SELECT_STYLE = {
540
+ display: "block",
541
+ padding: "6px 8px",
542
+ border: "1px solid #ccc",
543
+ borderRadius: "4px",
544
+ fontSize: "14px",
545
+ background: "#fff",
546
+ cursor: "pointer"
547
+ };
541
548
  var ThemePresetSelector = ({
542
549
  onSelectPreset
543
550
  }) => {
@@ -551,15 +558,13 @@ var ThemePresetSelector = ({
551
558
  /* @__PURE__ */ jsx(FieldLabel, { title: "Quick apply preset", htmlFor: "theme-preset-select" }),
552
559
  /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", alignItems: "center", children: [
553
560
  /* @__PURE__ */ jsx(
554
- SelectInput,
561
+ "select",
555
562
  {
556
563
  id: "theme-preset-select",
557
564
  value: selectedKey,
558
- onChange: (e) => {
559
- const v = e.target.value;
560
- setSelectedKey(typeof v === "string" ? v : Array.isArray(v) ? v[0] ?? "" : "");
561
- },
562
- options: PRESET_OPTIONS
565
+ onChange: (e) => setSelectedKey(e.target.value),
566
+ style: SELECT_STYLE,
567
+ children: PRESET_OPTIONS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
563
568
  }
564
569
  ),
565
570
  /* @__PURE__ */ jsx(
@@ -650,6 +655,15 @@ var BACKGROUND_STYLE_OPTIONS = [
650
655
  { value: "gradient", label: "Gradient" },
651
656
  { value: "noise", label: "Noise" }
652
657
  ];
658
+ var SELECT_STYLE2 = {
659
+ display: "block",
660
+ padding: "6px 8px",
661
+ border: "1px solid #ccc",
662
+ borderRadius: "4px",
663
+ fontSize: "14px",
664
+ background: "#fff",
665
+ cursor: "pointer"
666
+ };
653
667
  var ThemeEditorInner = ({ backButton }) => {
654
668
  const history = useHistory();
655
669
  const {
@@ -1417,80 +1431,80 @@ var ThemeEditorInner = ({ backButton }) => {
1417
1431
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1418
1432
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Radius", htmlFor: "borderRadius" }),
1419
1433
  /* @__PURE__ */ jsx2(
1420
- SelectInput2,
1434
+ "select",
1421
1435
  {
1422
1436
  id: "borderRadius",
1423
- horizontalConstraint: 3,
1424
1437
  value: formValues.borderRadius,
1425
1438
  onChange: (e) => handleChange(
1426
1439
  "borderRadius",
1427
1440
  e.target.value
1428
1441
  ),
1429
- options: BORDER_RADIUS_OPTIONS
1442
+ style: SELECT_STYLE2,
1443
+ children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1430
1444
  }
1431
1445
  )
1432
1446
  ] }) }),
1433
1447
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1434
1448
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Width", htmlFor: "borderWidth" }),
1435
1449
  /* @__PURE__ */ jsx2(
1436
- SelectInput2,
1450
+ "select",
1437
1451
  {
1438
1452
  id: "borderWidth",
1439
- horizontalConstraint: 3,
1440
1453
  value: formValues.borderWidth,
1441
1454
  onChange: (e) => handleChange(
1442
1455
  "borderWidth",
1443
1456
  e.target.value
1444
1457
  ),
1445
- options: BORDER_WIDTH_OPTIONS
1458
+ style: SELECT_STYLE2,
1459
+ children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1446
1460
  }
1447
1461
  )
1448
1462
  ] }) }),
1449
1463
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1450
1464
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Button Style", htmlFor: "buttonStyle" }),
1451
1465
  /* @__PURE__ */ jsx2(
1452
- SelectInput2,
1466
+ "select",
1453
1467
  {
1454
1468
  id: "buttonStyle",
1455
- horizontalConstraint: 3,
1456
1469
  value: formValues.buttonStyle,
1457
1470
  onChange: (e) => handleChange(
1458
1471
  "buttonStyle",
1459
1472
  e.target.value
1460
1473
  ),
1461
- options: BUTTON_STYLE_OPTIONS
1474
+ style: SELECT_STYLE2,
1475
+ children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1462
1476
  }
1463
1477
  )
1464
1478
  ] }) }),
1465
1479
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1466
1480
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Card Shadow", htmlFor: "cardShadow" }),
1467
1481
  /* @__PURE__ */ jsx2(
1468
- SelectInput2,
1482
+ "select",
1469
1483
  {
1470
1484
  id: "cardShadow",
1471
- horizontalConstraint: 3,
1472
1485
  value: formValues.cardShadow,
1473
1486
  onChange: (e) => handleChange(
1474
1487
  "cardShadow",
1475
1488
  e.target.value
1476
1489
  ),
1477
- options: CARD_SHADOW_OPTIONS
1490
+ style: SELECT_STYLE2,
1491
+ children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1478
1492
  }
1479
1493
  )
1480
1494
  ] }) }),
1481
1495
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1482
1496
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Header Style", htmlFor: "headerStyle" }),
1483
1497
  /* @__PURE__ */ jsx2(
1484
- SelectInput2,
1498
+ "select",
1485
1499
  {
1486
1500
  id: "headerStyle",
1487
- horizontalConstraint: 3,
1488
1501
  value: formValues.headerStyle,
1489
1502
  onChange: (e) => handleChange(
1490
1503
  "headerStyle",
1491
1504
  e.target.value
1492
1505
  ),
1493
- options: HEADER_STYLE_OPTIONS
1506
+ style: SELECT_STYLE2,
1507
+ children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1494
1508
  }
1495
1509
  )
1496
1510
  ] }) })
@@ -1575,32 +1589,32 @@ var ThemeEditorInner = ({ backButton }) => {
1575
1589
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1576
1590
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Shadow Style", htmlFor: "shadowStyle" }),
1577
1591
  /* @__PURE__ */ jsx2(
1578
- SelectInput2,
1592
+ "select",
1579
1593
  {
1580
1594
  id: "shadowStyle",
1581
- horizontalConstraint: 3,
1582
1595
  value: formValues.shadowStyle ?? DEFAULT_THEME.shadowStyle,
1583
1596
  onChange: (e) => handleChange(
1584
1597
  "shadowStyle",
1585
1598
  e.target.value
1586
1599
  ),
1587
- options: SHADOW_STYLE_OPTIONS
1600
+ style: SELECT_STYLE2,
1601
+ children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1588
1602
  }
1589
1603
  )
1590
1604
  ] }) }),
1591
1605
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1592
1606
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Surface Blur", htmlFor: "surfaceBlur" }),
1593
1607
  /* @__PURE__ */ jsx2(
1594
- SelectInput2,
1608
+ "select",
1595
1609
  {
1596
1610
  id: "surfaceBlur",
1597
- horizontalConstraint: 3,
1598
1611
  value: formValues.surfaceBlur ?? DEFAULT_THEME.surfaceBlur,
1599
1612
  onChange: (e) => handleChange(
1600
1613
  "surfaceBlur",
1601
1614
  e.target.value
1602
1615
  ),
1603
- options: SURFACE_BLUR_OPTIONS
1616
+ style: SELECT_STYLE2,
1617
+ children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1604
1618
  }
1605
1619
  )
1606
1620
  ] }) }),
@@ -1622,32 +1636,32 @@ var ThemeEditorInner = ({ backButton }) => {
1622
1636
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1623
1637
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Style", htmlFor: "borderStyle" }),
1624
1638
  /* @__PURE__ */ jsx2(
1625
- SelectInput2,
1639
+ "select",
1626
1640
  {
1627
1641
  id: "borderStyle",
1628
- horizontalConstraint: 3,
1629
1642
  value: formValues.borderStyle ?? DEFAULT_THEME.borderStyle,
1630
1643
  onChange: (e) => handleChange(
1631
1644
  "borderStyle",
1632
1645
  e.target.value
1633
1646
  ),
1634
- options: BORDER_STYLE_OPTIONS
1647
+ style: SELECT_STYLE2,
1648
+ children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1635
1649
  }
1636
1650
  )
1637
1651
  ] }) }),
1638
1652
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1639
1653
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Background Style", htmlFor: "backgroundStyle" }),
1640
1654
  /* @__PURE__ */ jsx2(
1641
- SelectInput2,
1655
+ "select",
1642
1656
  {
1643
1657
  id: "backgroundStyle",
1644
- horizontalConstraint: 3,
1645
1658
  value: formValues.backgroundStyle ?? DEFAULT_THEME.backgroundStyle,
1646
1659
  onChange: (e) => handleChange(
1647
1660
  "backgroundStyle",
1648
1661
  e.target.value
1649
1662
  ),
1650
- options: BACKGROUND_STYLE_OPTIONS
1663
+ style: SELECT_STYLE2,
1664
+ children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1651
1665
  }
1652
1666
  )
1653
1667
  ] }) })
@@ -1665,64 +1679,64 @@ var ThemeEditorInner = ({ backButton }) => {
1665
1679
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1666
1680
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Font Weight Base", htmlFor: "fontWeightBase" }),
1667
1681
  /* @__PURE__ */ jsx2(
1668
- SelectInput2,
1682
+ "select",
1669
1683
  {
1670
1684
  id: "fontWeightBase",
1671
- horizontalConstraint: 3,
1672
1685
  value: formValues.fontWeightBase ?? DEFAULT_THEME.fontWeightBase,
1673
1686
  onChange: (e) => handleChange(
1674
1687
  "fontWeightBase",
1675
1688
  e.target.value
1676
1689
  ),
1677
- options: FONT_WEIGHT_BASE_OPTIONS
1690
+ style: SELECT_STYLE2,
1691
+ children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1678
1692
  }
1679
1693
  )
1680
1694
  ] }) }),
1681
1695
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1682
1696
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Font Weight Heading", htmlFor: "fontWeightHeading" }),
1683
1697
  /* @__PURE__ */ jsx2(
1684
- SelectInput2,
1698
+ "select",
1685
1699
  {
1686
1700
  id: "fontWeightHeading",
1687
- horizontalConstraint: 3,
1688
1701
  value: formValues.fontWeightHeading ?? DEFAULT_THEME.fontWeightHeading,
1689
1702
  onChange: (e) => handleChange(
1690
1703
  "fontWeightHeading",
1691
1704
  e.target.value
1692
1705
  ),
1693
- options: FONT_WEIGHT_HEADING_OPTIONS
1706
+ style: SELECT_STYLE2,
1707
+ children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1694
1708
  }
1695
1709
  )
1696
1710
  ] }) }),
1697
1711
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1698
1712
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Letter Spacing", htmlFor: "letterSpacing" }),
1699
1713
  /* @__PURE__ */ jsx2(
1700
- SelectInput2,
1714
+ "select",
1701
1715
  {
1702
1716
  id: "letterSpacing",
1703
- horizontalConstraint: 3,
1704
1717
  value: formValues.letterSpacing ?? DEFAULT_THEME.letterSpacing,
1705
1718
  onChange: (e) => handleChange(
1706
1719
  "letterSpacing",
1707
1720
  e.target.value
1708
1721
  ),
1709
- options: LETTER_SPACING_OPTIONS
1722
+ style: SELECT_STYLE2,
1723
+ children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1710
1724
  }
1711
1725
  )
1712
1726
  ] }) }),
1713
1727
  /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1714
1728
  /* @__PURE__ */ jsx2(FieldLabel2, { title: "Text Transform", htmlFor: "textTransform" }),
1715
1729
  /* @__PURE__ */ jsx2(
1716
- SelectInput2,
1730
+ "select",
1717
1731
  {
1718
1732
  id: "textTransform",
1719
- horizontalConstraint: 3,
1720
1733
  value: formValues.textTransform ?? DEFAULT_THEME.textTransform,
1721
1734
  onChange: (e) => handleChange(
1722
1735
  "textTransform",
1723
1736
  e.target.value
1724
1737
  ),
1725
- options: TEXT_TRANSFORM_OPTIONS
1738
+ style: SELECT_STYLE2,
1739
+ children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
1726
1740
  }
1727
1741
  )
1728
1742
  ] }) })