@lax-wp/design-system 0.13.27 → 0.13.28-beta.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.
Files changed (6) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/index.cjs.js +10 -10
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.es.js +28 -32
  5. package/dist/index.es.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -843,8 +843,7 @@ const hr = ({ labels: e = [] }) => {
843
843
  children: /* @__PURE__ */ n(
844
844
  G8,
845
845
  {
846
- size: 16,
847
- className: "cursor-pointer pb-0.5 text-primary-600"
846
+ className: "cursor-pointer pb-0.5 text-primary-600 w-4 h-4"
848
847
  }
849
848
  )
850
849
  }
@@ -875,7 +874,7 @@ const hr = ({ labels: e = [] }) => {
875
874
  "div",
876
875
  {
877
876
  className: H(
878
- "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
877
+ "inline-flex min-w-12 items-center gap-1 rounded-md px-1 py-0.5",
879
878
  jr(T)
880
879
  ),
881
880
  onClick: () => ae?.(K),
@@ -942,7 +941,7 @@ const hr = ({ labels: e = [] }) => {
942
941
  ...D
943
942
  },
944
943
  className: H(
945
- "border border-solid h-[32px] text-neutral-900 dark:text-black-100 block w-full px-3 py-1.5 font-medium disabled:opacity-70 focus:outline-none focus:ring-0 dark:disabled:placeholder:!text-black-400",
944
+ "border border-solid h-8 text-neutral-900 dark:text-black-100 block w-full px-3 py-1.5 font-medium disabled:opacity-70 focus:outline-none focus:ring-0 dark:disabled:placeholder:!text-black-400",
946
945
  g || "text-sm",
947
946
  d || "text-neutral-900 dark:text-black-100",
948
947
  s && s,
@@ -972,7 +971,7 @@ const hr = ({ labels: e = [] }) => {
972
971
  se(!te), m?.(!te);
973
972
  },
974
973
  type: "button",
975
- children: te ? /* @__PURE__ */ n(j8, { className: "text-gray-400", size: 16 }) : /* @__PURE__ */ n(W8, { className: "text-gray-400", size: 16 })
974
+ children: te ? /* @__PURE__ */ n(j8, { className: "text-gray-400 w-4 h-4" }) : /* @__PURE__ */ n(W8, { className: "text-gray-400 w-4 h-4" })
976
975
  }
977
976
  ) : R && X.value ? /* @__PURE__ */ n(
978
977
  "button",
@@ -986,8 +985,7 @@ const hr = ({ labels: e = [] }) => {
986
985
  children: /* @__PURE__ */ n(
987
986
  X8,
988
987
  {
989
- className: "text-neutral-200 dark:text-black-500",
990
- size: 16
988
+ className: "text-neutral-200 dark:text-black-500 w-4 h-4"
991
989
  }
992
990
  )
993
991
  }
@@ -1456,7 +1454,7 @@ const jt = ({
1456
1454
  id: s,
1457
1455
  type: u = "button"
1458
1456
  }) => {
1459
- const d = "flex items-center", c = {
1457
+ const d = "flex items-center justify-center", c = {
1460
1458
  default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${l ? "" : "border border-neutral-300 dark:border-neutral-800"} p-2 hover:opacity-80`,
1461
1459
  secondary: `bg-transparent rounded-lg ${l ? "" : "border border-neutral-300 dark:border-black-400"} p-2 hover:opacity-80`,
1462
1460
  native: `bg-transparent rounded-lg ${l ? "" : "border border-neutral-300"} p-2 hover:opacity-80`,
@@ -1703,8 +1701,7 @@ const jt = ({
1703
1701
  children: /* @__PURE__ */ n(
1704
1702
  _p,
1705
1703
  {
1706
- className: "text-neutral-900 dark:text-black-300",
1707
- sx: { fontSize: 16 }
1704
+ className: "text-neutral-900 dark:text-black-300 w-icon h-icon"
1708
1705
  }
1709
1706
  )
1710
1707
  }
@@ -2075,7 +2072,7 @@ const K8 = (e) => Array.isArray(e) ? e.map(
2075
2072
  "div",
2076
2073
  {
2077
2074
  className: H(
2078
- "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
2075
+ "inline-flex min-w-12 items-center gap-1 rounded-md px-1 py-0.5",
2079
2076
  jr(m)
2080
2077
  ),
2081
2078
  onClick: () => v?.(_),
@@ -2658,8 +2655,6 @@ const Bi = () => {
2658
2655
  borderColor: r && u ? g ? "#F04438" : "#fda49b" : R.isFocused ? "var(--color-primary-600)" : g ? "#434343" : "#d9d9d9",
2659
2656
  backgroundColor: g ? "#141414" : R.isDisabled ? "#f5f5f5" : "#fff",
2660
2657
  borderRadius: "6px",
2661
- minHeight: "32px",
2662
- fontSize: "14px",
2663
2658
  padding: "0 4px 0 12px",
2664
2659
  opacity: R.isDisabled ? 0.6 : 1,
2665
2660
  cursor: R.isDisabled ? "not-allowed" : "pointer",
@@ -2817,7 +2812,8 @@ const Bi = () => {
2817
2812
  filterOption: v,
2818
2813
  placeholder: h,
2819
2814
  classNames: {
2820
- menuList: () => "nowheel"
2815
+ menuList: () => "nowheel",
2816
+ control: () => "!min-h-8 !text-sm"
2821
2817
  },
2822
2818
  components: {
2823
2819
  DropdownIndicator: P,
@@ -3553,7 +3549,7 @@ const M3 = ({
3553
3549
  "label",
3554
3550
  {
3555
3551
  className: H(
3556
- "relative flex items-center justify-start px-4 py-[9px] w-full dark:bg-neutral-900 bg-white dark:bg-black-700 rounded-lg text-neutral-400 h-8",
3552
+ "relative flex items-center justify-start px-4 py-[9px] w-full bg-white dark:bg-black-700 rounded-lg text-neutral-400 h-8",
3557
3553
  o
3558
3554
  ),
3559
3555
  children: [
@@ -3634,7 +3630,7 @@ const M3 = ({
3634
3630
  classNames: {
3635
3631
  root: "custom-tooltip dark:!bg-black-800"
3636
3632
  },
3637
- title: /* @__PURE__ */ S("div", { className: "flex flex-col items-start justify-center p-2 w-full h-full gap-2 dark:bg-black-800", children: [
3633
+ title: /* @__PURE__ */ S("div", { className: "flex flex-col items-start justify-center p-2 w-full h-full gap-2 dark:bg-black-800 min-w-80 min-h-fit", children: [
3638
3634
  /* @__PURE__ */ n(ne, { variant: "semibold", size: "extra-small", className: "text-white", children: b("Normal Search") }),
3639
3635
  /* @__PURE__ */ n(ne, { variant: "medium", size: "extra-small", className: "text-primary-400 dark:text-primary-400", appearance: "custom", children: b("Examples") }),
3640
3636
  /* @__PURE__ */ S("div", { className: "flex flex-col items-start justify-center ", children: [
@@ -3907,9 +3903,9 @@ const i4 = (e, t, r, a = "medium") => {
3907
3903
  {
3908
3904
  className: H(
3909
3905
  "z-10 transition-all transform",
3910
- F === "small" && (t ? "translate-x-2" : "translate-x-[-6px]"),
3911
- F === "medium" && (t ? "translate-x-[8.5px]" : "translate-x-[-8px]"),
3912
- F === "large" && (t ? "translate-x-2.5" : "translate-x-[-10px]")
3906
+ F === "small" && (t ? "translate-x-2" : "-translate-x-1.5"),
3907
+ F === "medium" && (t ? "translate-x-2" : "-translate-x-2"),
3908
+ F === "large" && (t ? "translate-x-2.5" : "-translate-x-2.5")
3913
3909
  ),
3914
3910
  children: t ? x?.checkedIcon ? x.checkedIcon : /* @__PURE__ */ n(o4, { size: 18, fill: "#016DCF" }) : x?.uncheckedIcon ? x.uncheckedIcon : /* @__PURE__ */ n(l4, { size: 18, fill: "#101828" })
3915
3911
  }
@@ -6088,11 +6084,11 @@ const dt = it(({
6088
6084
  }, [t, e, a, h]), w = ce(() => {
6089
6085
  switch (e) {
6090
6086
  case "primary":
6091
- return "bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";
6087
+ return "bg-primary-600 text-white border border-transparent focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";
6092
6088
  case "secondary":
6093
6089
  return "bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60";
6094
6090
  case "error":
6095
- return "bg-error-600 dark:bg-error-500 text-white hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";
6091
+ return "bg-error-600 dark:bg-error-500 text-white border border-transparent hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";
6096
6092
  case "error-secondary":
6097
6093
  return "bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60";
6098
6094
  case "secondary-neutral":
@@ -6188,7 +6184,7 @@ const dt = it(({
6188
6184
  }, [e, t]), N = Ui(), D = De(() => _?.length ? _.map((L) => {
6189
6185
  const R = Rp[L];
6190
6186
  return R ? N === "macos" ? R.macos : R.other : L;
6191
- }) : [], [_, N]), I = () => /* @__PURE__ */ n(nt, { children: /* @__PURE__ */ n(pa, { size: 20, className: "inline mr-2 text-white dark:text-white" }) }), P = c || (e === "primary" && t === "filled" ? "submit" : c);
6187
+ }) : [], [_, N]), I = () => /* @__PURE__ */ n(nt, { children: /* @__PURE__ */ n(pa, { className: "inline mr-2 text-white dark:text-white w-5 h-5" }) }), P = c || (e === "primary" && t === "filled" ? "submit" : c);
6192
6188
  return /* @__PURE__ */ n(Me, { title: m, placement: y, shortcuts: v, delayShow: !0, children: /* @__PURE__ */ S(
6193
6189
  "button",
6194
6190
  {
@@ -6198,8 +6194,8 @@ const dt = it(({
6198
6194
  cursor-pointer
6199
6195
  font-inter
6200
6196
  font-medium
6201
- py-[6px]
6202
- px-3
6197
+ py-1.5
6198
+ px-1
6203
6199
  rounded-lg
6204
6200
  text-sm
6205
6201
  whitespace-nowrap
@@ -6209,7 +6205,7 @@ const dt = it(({
6209
6205
  justify-center
6210
6206
  gap-1.5
6211
6207
  relative
6212
- max-h-[32px]
6208
+ max-h-8
6213
6209
  ${E()}
6214
6210
  `,
6215
6211
  disabled: a || i,
@@ -6225,7 +6221,7 @@ const dt = it(({
6225
6221
  D.length > 0 ? /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-0.5 ml-1 flex-shrink-0", children: D.map((L, R) => /* @__PURE__ */ n(
6226
6222
  "kbd",
6227
6223
  {
6228
- className: `inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${C()}`,
6224
+ className: `inline-flex items-center justify-center min-w-5 h-5 px-1 rounded text-xs font-medium leading-none ${C()}`,
6229
6225
  children: L
6230
6226
  },
6231
6227
  R
@@ -6242,7 +6238,7 @@ const dt = it(({
6242
6238
  children: /* @__PURE__ */ n(Sy, { className: "rotate-90 text-neutral-300 hover:opacity-50" })
6243
6239
  }
6244
6240
  ) }) : null,
6245
- d ? /* @__PURE__ */ n("span", { className: "absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-[1.5rem] min-h-[1.5rem] text-xs flex justify-center items-center", children: d }) : null
6241
+ d ? /* @__PURE__ */ n("span", { className: "absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-6 min-h-6 text-xs flex justify-center items-center", children: d }) : null
6246
6242
  ]
6247
6243
  }
6248
6244
  ) });
@@ -18119,7 +18115,7 @@ const BS = ({
18119
18115
  ] }),
18120
18116
  /* @__PURE__ */ n(ne, { size: "extra-small", appearance: "title", variant: "medium", className: "ml-1", children: d }),
18121
18117
  v,
18122
- /* @__PURE__ */ n("span", { children: A === i && !o && /* @__PURE__ */ n(jt, { variant: "ghost", children: /* @__PURE__ */ n(R9, { size: 16, className: "ml-[8px] text-neutral-400 dark:text-neutral-400" }) }) })
18118
+ /* @__PURE__ */ n("span", { children: A === i && !o && /* @__PURE__ */ n(jt, { variant: "ghost", children: /* @__PURE__ */ n(R9, { className: "ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400" }) }) })
18123
18119
  ] })
18124
18120
  ] }),
18125
18121
  /* @__PURE__ */ n(
@@ -18212,7 +18208,7 @@ const qS = ({
18212
18208
  o ? /* @__PURE__ */ n(
18213
18209
  "div",
18214
18210
  {
18215
- className: `${r === "parallel" ? "flex items-center" : `w-6 min-w-[24px] h-6 ${C <= t ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
18211
+ className: `${r === "parallel" ? "flex items-center" : `w-6 h-6 ${C <= t ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
18216
18212
  children: k?.isLocked ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ n(Hy, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ n(nt, { children: t > C && r === "linear" ? /* @__PURE__ */ n(O9, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ n(
18217
18213
  ne,
18218
18214
  {
@@ -20205,7 +20201,7 @@ const vT = ({ isOpen: e, onClose: t, anchorEl: r, placement: a = "right-start",
20205
20201
  "div",
20206
20202
  {
20207
20203
  className: H(
20208
- "bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 w-full h-full",
20204
+ "bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 w-full h-full text-sm",
20209
20205
  O
20210
20206
  ),
20211
20207
  children: tp((e || "") + " " + (t || ""))
@@ -24729,7 +24725,7 @@ const Ho = (e) => {
24729
24725
  classValue: H(
24730
24726
  "relative py-0.5 border-gray-200",
24731
24727
  _,
24732
- v ? "w-full flex items-center justify-center" : "px-3"
24728
+ v ? "w-full flex items-center justify-center" : "px-2"
24733
24729
  ),
24734
24730
  selectedClassValue: H(
24735
24731
  "absolute inset-0 rounded-md z-0",
@@ -63839,7 +63835,7 @@ const aq = ({
63839
63835
  children: /* @__PURE__ */ S(
63840
63836
  "div",
63841
63837
  {
63842
- className: "absolute w-full px-2.5 h-[39px] z-30 flex items-center",
63838
+ className: "absolute w-full px-2.5 h-[39px] z-30 flex items-center justify-center",
63843
63839
  style: { boxShadow: "8px 0px 8px 0px rgba(0, 0, 0, 0.02)" },
63844
63840
  children: [
63845
63841
  /* @__PURE__ */ n(