@gem-sdk/plugin-cart-drawer 1.23.0 → 1.35.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 (21) hide show
  1. package/dist/cjs/components/CartDiscountCode.js +8 -8
  2. package/dist/cjs/components/CartDrawer.js +13 -13
  3. package/dist/cjs/components/CartFooter.js +3 -3
  4. package/dist/cjs/components/CartLineItem.js +18 -18
  5. package/dist/cjs/components/CartLineItemQuantity.js +9 -9
  6. package/dist/cjs/components/CartLineQuantityAdjustButton.js +16 -16
  7. package/dist/cjs/components/CartOrderNote.js +4 -4
  8. package/dist/cjs/components/DiscountCodeItem.js +13 -13
  9. package/dist/cjs/components/LoadingIcon.js +3 -3
  10. package/dist/cjs/components/icons/Trash.js +1 -1
  11. package/dist/esm/components/CartDiscountCode.js +8 -8
  12. package/dist/esm/components/CartDrawer.js +13 -13
  13. package/dist/esm/components/CartFooter.js +3 -3
  14. package/dist/esm/components/CartLineItem.js +18 -18
  15. package/dist/esm/components/CartLineItemQuantity.js +9 -9
  16. package/dist/esm/components/CartLineQuantityAdjustButton.js +16 -16
  17. package/dist/esm/components/CartOrderNote.js +4 -4
  18. package/dist/esm/components/DiscountCodeItem.js +13 -13
  19. package/dist/esm/components/LoadingIcon.js +3 -3
  20. package/dist/esm/components/icons/Trash.js +1 -1
  21. package/package.json +4 -4
package/dist/cjs/components/CartDiscountCode.js CHANGED
@@ -38,13 +38,13 @@ const CartDiscountCode = ()=>{
38
38
  currentCode
39
39
  ]);
40
40
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
41
- className: "flex flex-col gap-2 border-t p-4 ",
41
+ className: "gp-flex gp-flex-col gp-gap-2 gp-border-t gp-p-4 ",
42
42
  children: [
43
43
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- className: "flex gap-4",
44
+ className: "gp-flex gp-gap-4",
45
45
  children: [
46
46
  /*#__PURE__*/ jsxRuntime.jsx("input", {
47
- className: "flex-1 border p-2 outline-none",
47
+ className: "gp-flex-1 gp-border gp-p-2 gp-outline-none",
48
48
  placeholder: "Discount Code",
49
49
  style: {
50
50
  ...core.composeRadius({
@@ -58,7 +58,7 @@ const CartDiscountCode = ()=>{
58
58
  /*#__PURE__*/ jsxRuntime.jsxs("button", {
59
59
  disabled: isMutating,
60
60
  onClick: addCode,
61
- className: "relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80",
61
+ className: "gp-relative gp-whitespace-nowrap gp-bg-g-brand gp-px-2 gp-text-g-text-3 disabled:gp-opacity-80",
62
62
  style: {
63
63
  ...core.composeRadius({
64
64
  normal: {
@@ -68,13 +68,13 @@ const CartDiscountCode = ()=>{
68
68
  },
69
69
  children: [
70
70
  /*#__PURE__*/ jsxRuntime.jsx("div", {
71
- className: core.cls('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', {
72
- hidden: !isMutating
71
+ className: core.cls('gp-absolute gp-left-1/2 gp-top-1/2 -gp-translate-x-1/2 -gp-translate-y-1/2', {
72
+ 'gp-hidden': !isMutating
73
73
  }),
74
74
  children: /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {})
75
75
  }),
76
76
  /*#__PURE__*/ jsxRuntime.jsx("span", {
77
- className: core.cls('g-paragraph-1', {
77
+ className: core.cls('gp-g-paragraph-1', {
78
78
  invisible: isMutating
79
79
  }),
80
80
  children: "Apply Code"
@@ -84,7 +84,7 @@ const CartDiscountCode = ()=>{
84
84
  ]
85
85
  }),
86
86
  /*#__PURE__*/ jsxRuntime.jsx("div", {
87
- className: "inline-flex flex-wrap gap-2",
87
+ className: "gp-inline-flex gp-flex-wrap gp-gap-2",
88
88
  children: cart?.discounts?.map((code)=>/*#__PURE__*/ jsxRuntime.jsx(DiscountCodeItem.default, {
89
89
  item: code
90
90
  }, code.code))
package/dist/cjs/components/CartDrawer.js CHANGED
@@ -43,9 +43,9 @@ const CartDrawer = ({ className, style, setting })=>{
43
43
  nodeRef: nodeRef,
44
44
  children: (state)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
45
45
  ref: nodeRef,
46
- className: core.cls('fixed inset-0 z-90', className, {
47
- invisible: !isCartOpen,
48
- visible: isCartOpen
46
+ className: core.cls('gp-fixed gp-inset-0 gp-z-90', className, {
47
+ 'gp-invisible': !isCartOpen,
48
+ 'gp-visible': isCartOpen
49
49
  }),
50
50
  style: {
51
51
  ...style,
@@ -56,15 +56,15 @@ const CartDrawer = ({ className, style, setting })=>{
56
56
  /*#__PURE__*/ jsxRuntime.jsx("div", {
57
57
  "aria-hidden": true,
58
58
  onClick: ()=>closeCart(),
59
- className: "fixed inset-0 z-80 bg-slate-600/40"
59
+ className: "gp-fixed gp-inset-0 gp-z-80 gp-bg-slate-600/40"
60
60
  }),
61
61
  /*#__PURE__*/ jsxRuntime.jsx("div", {
62
- className: "fixed inset-y-0 right-0 z-90 flex w-full max-w-[400px] flex-col bg-white text-g-text-1 shadow-2xl mobile:w-full",
62
+ className: "gp-fixed gp-inset-y-0 gp-right-0 gp-z-90 gp-flex gp-w-full gp-max-w-[400px] gp-flex-col gp-bg-white gp-text-g-text-1 gp-shadow-2xl mobile:gp-w-full",
63
63
  children: loading ? /*#__PURE__*/ jsxRuntime.jsx("div", {
64
- className: "w-full pt-10 text-center",
64
+ className: "gp-w-full gp-pt-10 gp-text-center",
65
65
  children: "Loading..."
66
66
  }) : error ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
67
- className: "w-full pt-10 text-center text-g-error",
67
+ className: "gp-w-full gp-pt-10 gp-text-center gp-text-g-error",
68
68
  children: [
69
69
  "Error: ",
70
70
  error?.[0]?.message
@@ -72,17 +72,17 @@ const CartDrawer = ({ className, style, setting })=>{
72
72
  }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
73
73
  children: [
74
74
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
75
- className: "flex items-center justify-between border-b border-b-g-line-3 px-6 py-3",
75
+ className: "gp-flex gp-items-center gp-justify-between gp-border-b-g-line-3 gp-px-6 gp-py-3 border-b",
76
76
  children: [
77
77
  /*#__PURE__*/ jsxRuntime.jsx("span", {
78
- className: "font-g-heading text-xl font-semibold",
78
+ className: "gp-font-g-heading gp-text-xl gp-font-semibold",
79
79
  children: setting?.title
80
80
  }),
81
81
  /*#__PURE__*/ jsxRuntime.jsx("button", {
82
82
  onClick: closeCart,
83
83
  title: "Close cart drawer",
84
84
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
85
- className: "w-5",
85
+ className: "gp-w-5",
86
86
  fill: "currentColor",
87
87
  viewBox: "0 0 24 24",
88
88
  xmlns: "http://www.w3.org/2000/svg",
@@ -94,14 +94,14 @@ const CartDrawer = ({ className, style, setting })=>{
94
94
  ]
95
95
  }),
96
96
  /*#__PURE__*/ jsxRuntime.jsx("div", {
97
- className: "group h-full overflow-y-auto px-6 pb-4 scrollbar:!h-1.5 scrollbar:!w-1.5 scrollbar:bg-transparent scrollbar-track:!rounded scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300",
97
+ className: "gp-group gp-h-full gp-overflow-y-auto gp-px-6 gp-pb-4 scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",
98
98
  children: !data || !data.lineItems.length ? /*#__PURE__*/ jsxRuntime.jsx("div", {
99
- className: "w-full pt-10 text-center",
99
+ className: "gp-w-full gp-pt-10 gp-text-center",
100
100
  children: setting?.emptyLabel
101
101
  }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
102
102
  children: [
103
103
  /*#__PURE__*/ jsxRuntime.jsx("div", {
104
- className: "flex flex-col",
104
+ className: "gp-flex gp-flex-col",
105
105
  children: data.lineItems.map((line)=>{
106
106
  if (!line) return null;
107
107
  return /*#__PURE__*/ jsxRuntime.jsx(core.CartLineProvider, {
package/dist/cjs/components/CartFooter.js CHANGED
@@ -26,10 +26,10 @@ const CartFooter = ({ checkoutUrl, price, openMode })=>{
26
26
  }
27
27
  };
28
28
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
29
- className: "flex flex-col gap-4 border-t border-t-g-line-3 bg-g-bg-2 px-6 pb-8 pt-4",
29
+ className: "gp-flex gp-flex-col gp-gap-4 gp-border-t gp-border-t-g-line-3 gp-bg-g-bg-2 gp-px-6 gp-pb-8 gp-pt-4",
30
30
  children: [
31
31
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
32
- className: "g-paragraph-1 flex justify-between font-semibold",
32
+ className: "gp-g-paragraph-1 gp-flex gp-justify-between gp-font-semibold",
33
33
  children: [
34
34
  /*#__PURE__*/ jsxRuntime.jsx("span", {
35
35
  children: "Subtotal:"
@@ -44,7 +44,7 @@ const CartFooter = ({ checkoutUrl, price, openMode })=>{
44
44
  "aria-label": "Checkout",
45
45
  role: "button",
46
46
  "aria-hidden": "true",
47
- className: "g-paragraph-1 flex justify-between bg-g-brand px-4 py-3 font-semibold text-g-text-3",
47
+ className: "gp-g-paragraph-1 gp-flex gp-justify-between gp-bg-g-brand gp-px-4 gp-py-3 gp-font-semibold gp-text-g-text-3",
48
48
  onClick: ()=>openCheckout(600, 600),
49
49
  style: {
50
50
  ...core.composeRadius({
package/dist/cjs/components/CartLineItem.js CHANGED
@@ -16,21 +16,21 @@ const CartLineItem = ()=>{
16
16
  const money = core.useMoney(line.variant?.price ? line.variant?.price : 0);
17
17
  const compareAtPrice = core.useMoney(line.variant?.listPrice ? line.variant?.listPrice : 0);
18
18
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
19
- className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent",
19
+ className: "gp-flex gp-items-center gp-gap-4 gp-border-b gp-border-b-g-line-2 gp-py-4 last:gp-border-b-transparent",
20
20
  children: [
21
21
  /*#__PURE__*/ jsxRuntime.jsx("div", {
22
- className: "aspect-square w-16",
22
+ className: "gp-aspect-square gp-w-16",
23
23
  children: line.variant?.image?.url && /*#__PURE__*/ jsxRuntime.jsx("img", {
24
- className: "h-full w-full object-cover",
24
+ className: "gp-h-full gp-w-full gp-object-cover",
25
25
  src: line.variant.image.url,
26
26
  alt: line.variant?.image?.altText ?? ''
27
27
  })
28
28
  }),
29
29
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
30
- className: "flex-1",
30
+ className: "gp-flex-1",
31
31
  children: [
32
32
  /*#__PURE__*/ jsxRuntime.jsxs("p", {
33
- className: "line-clamp-2",
33
+ className: "gp-line-clamp-2",
34
34
  children: [
35
35
  line.productTitle,
36
36
  " ",
@@ -38,17 +38,17 @@ const CartLineItem = ()=>{
38
38
  ]
39
39
  }),
40
40
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
41
- className: "flex flex-col gap-1 text-sm",
41
+ className: "gp-flex gp-flex-col gp-gap-1 gp-text-sm",
42
42
  children: [
43
43
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- className: "flex gap-2",
44
+ className: "gp-flex gp-gap-2",
45
45
  children: [
46
46
  /*#__PURE__*/ jsxRuntime.jsx("span", {
47
- className: "font-semibold",
47
+ className: "gp-font-semibold",
48
48
  children: money.localizedString
49
49
  }),
50
50
  line.variant?.listPrice > 0 && /*#__PURE__*/ jsxRuntime.jsx("span", {
51
- className: "text-[#B4B4B4] line-through",
51
+ className: "gp-text-[#B4B4B4] gp-line-through",
52
52
  children: compareAtPrice.localizedString
53
53
  })
54
54
  ]
@@ -63,7 +63,7 @@ const CartLineItem = ()=>{
63
63
  ]
64
64
  }),
65
65
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
- className: "flex items-center justify-between",
66
+ className: "gp-flex gp-items-center gp-justify-between",
67
67
  children: [
68
68
  /*#__PURE__*/ jsxRuntime.jsx(CartLineItemQuantity.default, {
69
69
  size: "medium"
@@ -72,17 +72,17 @@ const CartLineItem = ()=>{
72
72
  onClick: ()=>{
73
73
  components.openConfirm({
74
74
  title: /*#__PURE__*/ jsxRuntime.jsxs("div", {
75
- className: "flex w-full flex-col items-center gap-4",
75
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
76
76
  children: [
77
77
  /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
78
78
  /*#__PURE__*/ jsxRuntime.jsx("p", {
79
- className: "font-g-body text-xl font-semibold",
79
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
80
80
  children: "Are you sure ?"
81
81
  })
82
82
  ]
83
83
  }),
84
84
  content: /*#__PURE__*/ jsxRuntime.jsxs("div", {
85
- className: "text-center",
85
+ className: "gp-text-center",
86
86
  children: [
87
87
  /*#__PURE__*/ jsxRuntime.jsx("p", {
88
88
  children: "Do you really want to delete these items?"
@@ -92,11 +92,11 @@ const CartLineItem = ()=>{
92
92
  })
93
93
  ]
94
94
  }),
95
- className: 'w-full max-w-[572px] gap-4 rounded',
95
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
96
96
  buttons: [
97
97
  {
98
98
  label: 'Cancel',
99
- className: 'w-[130px]',
99
+ className: 'gp-w-[130px]',
100
100
  styles: {
101
101
  backgroundColor: {
102
102
  normal: 'bg-1'
@@ -113,7 +113,7 @@ const CartLineItem = ()=>{
113
113
  },
114
114
  {
115
115
  label: 'Delete',
116
- className: 'w-[130px]',
116
+ className: 'gp-w-[130px]',
117
117
  styles: {
118
118
  textColor: {
119
119
  normal: 'text-3'
@@ -146,10 +146,10 @@ const CartLineItem = ()=>{
146
146
  title: "Remove item from cart",
147
147
  type: "button",
148
148
  children: loading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {
149
- className: "text-g-brand"
149
+ className: "gp-text-g-brand"
150
150
  }) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
151
151
  xmlns: "http://www.w3.org/2000/svg",
152
- className: "w-4 text-gray-400",
152
+ className: "gp-w-4 gp-text-gray-400",
153
153
  fill: "none",
154
154
  viewBox: "0 0 24 24",
155
155
  stroke: "currentColor",
package/dist/cjs/components/CartLineItemQuantity.js CHANGED
@@ -9,18 +9,18 @@ var CartLineQuantityAdjustButton = require('./CartLineQuantityAdjustButton.js');
9
9
  const CartLineItemQuantity = ({ size })=>{
10
10
  const line = core.useCartLine();
11
11
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
12
- className: core.cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
13
- 'h-12': size === 'large',
14
- 'h-10': size === 'medium',
15
- 'h-8': size === 'small'
12
+ className: core.cls('gp-mt-2 gp-inline-flex gp-items-center gp-overflow-auto gp-rounded gp-border gp-border-g-line-3 gp-text-g-text-1', {
13
+ 'gp-h-12': size === 'large',
14
+ 'gp-h-10': size === 'medium',
15
+ 'gp-h-8': size === 'small'
16
16
  }),
17
17
  children: [
18
18
  /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
19
19
  adjust: "decrease",
20
20
  "aria-label": "Decrease quantity",
21
- className: "flex aspect-square h-full items-center justify-center",
21
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
22
22
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
23
- className: "h-4",
23
+ className: "gp-h-4",
24
24
  fill: "currentColor",
25
25
  viewBox: "0 0 24 24",
26
26
  xmlns: "http://www.w3.org/2000/svg",
@@ -30,15 +30,15 @@ const CartLineItemQuantity = ({ size })=>{
30
30
  })
31
31
  }),
32
32
  /*#__PURE__*/ jsxRuntime.jsx("div", {
33
- className: "flex h-full min-w-[50px] select-none items-center justify-center border-x border-g-line-3 px-2 text-center text-base font-semibold",
33
+ className: "gp-flex gp-h-full gp-min-w-[50px] gp-select-none gp-items-center gp-justify-center gp-border-x gp-border-g-line-3 gp-px-2 gp-text-center gp-text-base gp-font-semibold",
34
34
  children: line.quantity
35
35
  }),
36
36
  /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
37
37
  adjust: "increase",
38
38
  "aria-label": "Increase quantity",
39
- className: "flex aspect-square h-full items-center justify-center",
39
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
40
40
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
41
- className: "h-4",
41
+ className: "gp-h-4",
42
42
  fill: "currentColor",
43
43
  viewBox: "0 0 24 24",
44
44
  xmlns: "http://www.w3.org/2000/svg",
package/dist/cjs/components/CartLineQuantityAdjustButton.js CHANGED
@@ -26,17 +26,17 @@ var Trash = require('./icons/Trash.js');
26
26
  if (adjust === 'remove') {
27
27
  components.openConfirm({
28
28
  title: /*#__PURE__*/ jsxRuntime.jsxs("div", {
29
- className: "flex w-full flex-col items-center gap-4",
29
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
30
30
  children: [
31
31
  /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
32
32
  /*#__PURE__*/ jsxRuntime.jsx("p", {
33
- className: "font-g-body text-xl font-semibold",
33
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
34
34
  children: "Are you sure ?"
35
35
  })
36
36
  ]
37
37
  }),
38
38
  content: /*#__PURE__*/ jsxRuntime.jsxs("div", {
39
- className: "text-center",
39
+ className: "gp-text-center",
40
40
  children: [
41
41
  /*#__PURE__*/ jsxRuntime.jsx("p", {
42
42
  children: "Do you really want to delete this item?"
@@ -46,11 +46,11 @@ var Trash = require('./icons/Trash.js');
46
46
  })
47
47
  ]
48
48
  }),
49
- className: 'w-full max-w-[572px] gap-4 rounded',
49
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
50
50
  buttons: [
51
51
  {
52
52
  label: 'Cancel',
53
- className: 'w-[130px]',
53
+ className: 'gp-w-[130px]',
54
54
  styles: {
55
55
  backgroundColor: {
56
56
  normal: 'bg-1'
@@ -67,7 +67,7 @@ var Trash = require('./icons/Trash.js');
67
67
  },
68
68
  {
69
69
  label: 'Delete',
70
- className: 'w-[130px]',
70
+ className: 'gp-w-[130px]',
71
71
  styles: {
72
72
  textColor: {
73
73
  normal: 'text-3'
@@ -101,17 +101,17 @@ var Trash = require('./icons/Trash.js');
101
101
  if (quantity <= 0) {
102
102
  components.openConfirm({
103
103
  title: /*#__PURE__*/ jsxRuntime.jsxs("div", {
104
- className: "flex w-full flex-col items-center gap-4",
104
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
105
105
  children: [
106
106
  /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
107
107
  /*#__PURE__*/ jsxRuntime.jsx("p", {
108
- className: "font-g-body text-xl font-semibold",
108
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
109
109
  children: "Are you sure ?"
110
110
  })
111
111
  ]
112
112
  }),
113
113
  content: /*#__PURE__*/ jsxRuntime.jsxs("div", {
114
- className: "text-center",
114
+ className: "gp-text-center",
115
115
  children: [
116
116
  /*#__PURE__*/ jsxRuntime.jsx("p", {
117
117
  children: "Do you really want to delete this item?"
@@ -121,11 +121,11 @@ var Trash = require('./icons/Trash.js');
121
121
  })
122
122
  ]
123
123
  }),
124
- className: 'w-full max-w-[572px] gap-4 rounded',
124
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
125
125
  buttons: [
126
126
  {
127
127
  label: 'Cancel',
128
- className: 'w-[130px]',
128
+ className: 'gp-w-[130px]',
129
129
  styles: {
130
130
  backgroundColor: {
131
131
  normal: 'bg-1'
@@ -142,7 +142,7 @@ var Trash = require('./icons/Trash.js');
142
142
  },
143
143
  {
144
144
  label: 'Delete',
145
- className: 'w-[130px]',
145
+ className: 'gp-w-[130px]',
146
146
  styles: {
147
147
  textColor: {
148
148
  normal: 'text-3'
@@ -185,16 +185,16 @@ var Trash = require('./icons/Trash.js');
185
185
  }
186
186
  },
187
187
  children: isLoading ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
188
- className: "flex gap-1",
188
+ className: "gp-flex gp-gap-1",
189
189
  children: [
190
190
  /*#__PURE__*/ jsxRuntime.jsx("span", {
191
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_alternate] rounded-full bg-g-brand"
191
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-g-brand"
192
192
  }),
193
193
  /*#__PURE__*/ jsxRuntime.jsx("span", {
194
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-g-brand"
194
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-g-brand"
195
195
  }),
196
196
  /*#__PURE__*/ jsxRuntime.jsx("span", {
197
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-g-brand"
197
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-g-brand"
198
198
  })
199
199
  ]
200
200
  }) : children
package/dist/cjs/components/CartOrderNote.js CHANGED
@@ -49,12 +49,12 @@ const CartOrderNote = ({ triggerUpdate, debounce, placeholder })=>{
49
49
  onChange
50
50
  };
51
51
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
52
- className: "flex flex-col",
52
+ className: "gp-flex gp-flex-col",
53
53
  children: [
54
54
  /*#__PURE__*/ jsxRuntime.jsx("div", {
55
- className: "mb-4 border-b border-b-[#F1F3F4] pb-3",
55
+ className: "gp-mb-4 gp-border-b gp-border-b-[#F1F3F4] gp-pb-3",
56
56
  children: /*#__PURE__*/ jsxRuntime.jsx("span", {
57
- className: "font-semibold text-[#424242]",
57
+ className: "gp-font-semibold gp-text-[#424242]",
58
58
  children: "Order Note"
59
59
  })
60
60
  }),
@@ -62,7 +62,7 @@ const CartOrderNote = ({ triggerUpdate, debounce, placeholder })=>{
62
62
  defaultValue: cart?.note,
63
63
  placeholder: placeholder,
64
64
  ref: textRef,
65
- className: "w-full rounded border p-4 outline-none",
65
+ className: "gp-w-full gp-rounded gp-border gp-p-4 gp-outline-none",
66
66
  ...inputProps
67
67
  })
68
68
  ]
package/dist/cjs/components/DiscountCodeItem.js CHANGED
@@ -19,26 +19,26 @@ const DiscountCodeItem = ({ item })=>{
19
19
  const removeCode = react.useCallback((code)=>{
20
20
  components.openConfirm({
21
21
  title: /*#__PURE__*/ jsxRuntime.jsxs("div", {
22
- className: "flex w-full flex-col items-center gap-4",
22
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
23
23
  children: [
24
24
  /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
25
25
  /*#__PURE__*/ jsxRuntime.jsx("p", {
26
- className: "font-g-body text-xl font-semibold",
26
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
27
27
  children: "Are you sure ?"
28
28
  })
29
29
  ]
30
30
  }),
31
31
  content: /*#__PURE__*/ jsxRuntime.jsx("div", {
32
- className: "text-center",
32
+ className: "gp-text-center",
33
33
  children: /*#__PURE__*/ jsxRuntime.jsx("p", {
34
34
  children: "Do you really want to delete this code?"
35
35
  })
36
36
  }),
37
- className: 'w-full max-w-[572px] gap-4 rounded',
37
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
38
38
  buttons: [
39
39
  {
40
40
  label: 'Cancel',
41
- className: 'w-[130px]',
41
+ className: 'gp-w-[130px]',
42
42
  styles: {
43
43
  backgroundColor: {
44
44
  normal: 'bg-1'
@@ -55,7 +55,7 @@ const DiscountCodeItem = ({ item })=>{
55
55
  },
56
56
  {
57
57
  label: 'Delete',
58
- className: 'w-[130px]',
58
+ className: 'gp-w-[130px]',
59
59
  styles: {
60
60
  textColor: {
61
61
  normal: 'text-3'
@@ -89,23 +89,23 @@ const DiscountCodeItem = ({ item })=>{
89
89
  currentCode
90
90
  ]);
91
91
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
92
- className: "flex h-8 items-center gap-2 rounded-sm border pl-2",
92
+ className: "gp-flex gp-h-8 gp-items-center gp-gap-2 gp-rounded-sm gp-border gp-pl-2",
93
93
  children: [
94
94
  /*#__PURE__*/ jsxRuntime.jsx("span", {
95
- className: core.cls('flex-1', {
96
- 'text-g-error line-through': !item.applicable,
97
- 'text-g-success': item.applicable
95
+ className: core.cls('gp-flex-1', {
96
+ 'gp-text-g-error gp-line-through': !item.applicable,
97
+ 'gp-text-g-success': item.applicable
98
98
  }),
99
99
  children: item.code
100
100
  }),
101
101
  /*#__PURE__*/ jsxRuntime.jsx("button", {
102
102
  disabled: isMutating,
103
103
  onClick: ()=>removeCode(item.code),
104
- className: "flex aspect-square h-full items-center justify-center",
104
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
105
105
  children: isMutating ? /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {
106
- className: "text-g-brand"
106
+ className: "gp-text-g-brand"
107
107
  }) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
108
- className: "w-4",
108
+ className: "gp-w-4",
109
109
  fill: "none",
110
110
  viewBox: "0 0 24 24",
111
111
  xmlns: "http://www.w3.org/2000/svg",
package/dist/cjs/components/LoadingIcon.js CHANGED
@@ -6,13 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
 
8
8
  const LoadingIcon = ({ className })=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
9
- className: core.cls('w-4 animate-spin', className),
9
+ className: core.cls('gp-w-4 gp-animate-spin', className),
10
10
  xmlns: "http://www.w3.org/2000/svg",
11
11
  fill: "none",
12
12
  viewBox: "0 0 24 24",
13
13
  children: [
14
14
  /*#__PURE__*/ jsxRuntime.jsx("circle", {
15
- className: "opacity-25",
15
+ className: "gp-opacity-25",
16
16
  cx: "12",
17
17
  cy: "12",
18
18
  r: "10",
@@ -20,7 +20,7 @@ const LoadingIcon = ({ className })=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
20
20
  strokeWidth: "4"
21
21
  }),
22
22
  /*#__PURE__*/ jsxRuntime.jsx("path", {
23
- className: "opacity-75",
23
+ className: "gp-opacity-75",
24
24
  fill: "currentColor",
25
25
  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
26
26
  })
package/dist/cjs/components/icons/Trash.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
 
7
7
  const Trash = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
8
- className: "text-g-warning",
8
+ className: "gp-text-g-warning",
9
9
  width: "58",
10
10
  height: "66",
11
11
  viewBox: "0 0 58 66",
package/dist/esm/components/CartDiscountCode.js CHANGED
@@ -34,13 +34,13 @@ const CartDiscountCode = ()=>{
34
34
  currentCode
35
35
  ]);
36
36
  return /*#__PURE__*/ jsxs("div", {
37
- className: "flex flex-col gap-2 border-t p-4 ",
37
+ className: "gp-flex gp-flex-col gp-gap-2 gp-border-t gp-p-4 ",
38
38
  children: [
39
39
  /*#__PURE__*/ jsxs("div", {
40
- className: "flex gap-4",
40
+ className: "gp-flex gp-gap-4",
41
41
  children: [
42
42
  /*#__PURE__*/ jsx("input", {
43
- className: "flex-1 border p-2 outline-none",
43
+ className: "gp-flex-1 gp-border gp-p-2 gp-outline-none",
44
44
  placeholder: "Discount Code",
45
45
  style: {
46
46
  ...composeRadius({
@@ -54,7 +54,7 @@ const CartDiscountCode = ()=>{
54
54
  /*#__PURE__*/ jsxs("button", {
55
55
  disabled: isMutating,
56
56
  onClick: addCode,
57
- className: "relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80",
57
+ className: "gp-relative gp-whitespace-nowrap gp-bg-g-brand gp-px-2 gp-text-g-text-3 disabled:gp-opacity-80",
58
58
  style: {
59
59
  ...composeRadius({
60
60
  normal: {
@@ -64,13 +64,13 @@ const CartDiscountCode = ()=>{
64
64
  },
65
65
  children: [
66
66
  /*#__PURE__*/ jsx("div", {
67
- className: cls('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', {
68
- hidden: !isMutating
67
+ className: cls('gp-absolute gp-left-1/2 gp-top-1/2 -gp-translate-x-1/2 -gp-translate-y-1/2', {
68
+ 'gp-hidden': !isMutating
69
69
  }),
70
70
  children: /*#__PURE__*/ jsx(LoadingIcon, {})
71
71
  }),
72
72
  /*#__PURE__*/ jsx("span", {
73
- className: cls('g-paragraph-1', {
73
+ className: cls('gp-g-paragraph-1', {
74
74
  invisible: isMutating
75
75
  }),
76
76
  children: "Apply Code"
@@ -80,7 +80,7 @@ const CartDiscountCode = ()=>{
80
80
  ]
81
81
  }),
82
82
  /*#__PURE__*/ jsx("div", {
83
- className: "inline-flex flex-wrap gap-2",
83
+ className: "gp-inline-flex gp-flex-wrap gp-gap-2",
84
84
  children: cart?.discounts?.map((code)=>/*#__PURE__*/ jsx(DiscountCodeItem, {
85
85
  item: code
86
86
  }, code.code))
package/dist/esm/components/CartDrawer.js CHANGED
@@ -39,9 +39,9 @@ const CartDrawer = ({ className, style, setting })=>{
39
39
  nodeRef: nodeRef,
40
40
  children: (state)=>/*#__PURE__*/ jsxs("div", {
41
41
  ref: nodeRef,
42
- className: cls('fixed inset-0 z-90', className, {
43
- invisible: !isCartOpen,
44
- visible: isCartOpen
42
+ className: cls('gp-fixed gp-inset-0 gp-z-90', className, {
43
+ 'gp-invisible': !isCartOpen,
44
+ 'gp-visible': isCartOpen
45
45
  }),
46
46
  style: {
47
47
  ...style,
@@ -52,15 +52,15 @@ const CartDrawer = ({ className, style, setting })=>{
52
52
  /*#__PURE__*/ jsx("div", {
53
53
  "aria-hidden": true,
54
54
  onClick: ()=>closeCart(),
55
- className: "fixed inset-0 z-80 bg-slate-600/40"
55
+ className: "gp-fixed gp-inset-0 gp-z-80 gp-bg-slate-600/40"
56
56
  }),
57
57
  /*#__PURE__*/ jsx("div", {
58
- className: "fixed inset-y-0 right-0 z-90 flex w-full max-w-[400px] flex-col bg-white text-g-text-1 shadow-2xl mobile:w-full",
58
+ className: "gp-fixed gp-inset-y-0 gp-right-0 gp-z-90 gp-flex gp-w-full gp-max-w-[400px] gp-flex-col gp-bg-white gp-text-g-text-1 gp-shadow-2xl mobile:gp-w-full",
59
59
  children: loading ? /*#__PURE__*/ jsx("div", {
60
- className: "w-full pt-10 text-center",
60
+ className: "gp-w-full gp-pt-10 gp-text-center",
61
61
  children: "Loading..."
62
62
  }) : error ? /*#__PURE__*/ jsxs("div", {
63
- className: "w-full pt-10 text-center text-g-error",
63
+ className: "gp-w-full gp-pt-10 gp-text-center gp-text-g-error",
64
64
  children: [
65
65
  "Error: ",
66
66
  error?.[0]?.message
@@ -68,17 +68,17 @@ const CartDrawer = ({ className, style, setting })=>{
68
68
  }) : /*#__PURE__*/ jsxs(Fragment, {
69
69
  children: [
70
70
  /*#__PURE__*/ jsxs("div", {
71
- className: "flex items-center justify-between border-b border-b-g-line-3 px-6 py-3",
71
+ className: "gp-flex gp-items-center gp-justify-between gp-border-b-g-line-3 gp-px-6 gp-py-3 border-b",
72
72
  children: [
73
73
  /*#__PURE__*/ jsx("span", {
74
- className: "font-g-heading text-xl font-semibold",
74
+ className: "gp-font-g-heading gp-text-xl gp-font-semibold",
75
75
  children: setting?.title
76
76
  }),
77
77
  /*#__PURE__*/ jsx("button", {
78
78
  onClick: closeCart,
79
79
  title: "Close cart drawer",
80
80
  children: /*#__PURE__*/ jsx("svg", {
81
- className: "w-5",
81
+ className: "gp-w-5",
82
82
  fill: "currentColor",
83
83
  viewBox: "0 0 24 24",
84
84
  xmlns: "http://www.w3.org/2000/svg",
@@ -90,14 +90,14 @@ const CartDrawer = ({ className, style, setting })=>{
90
90
  ]
91
91
  }),
92
92
  /*#__PURE__*/ jsx("div", {
93
- className: "group h-full overflow-y-auto px-6 pb-4 scrollbar:!h-1.5 scrollbar:!w-1.5 scrollbar:bg-transparent scrollbar-track:!rounded scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300",
93
+ className: "gp-group gp-h-full gp-overflow-y-auto gp-px-6 gp-pb-4 scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",
94
94
  children: !data || !data.lineItems.length ? /*#__PURE__*/ jsx("div", {
95
- className: "w-full pt-10 text-center",
95
+ className: "gp-w-full gp-pt-10 gp-text-center",
96
96
  children: setting?.emptyLabel
97
97
  }) : /*#__PURE__*/ jsxs(Fragment, {
98
98
  children: [
99
99
  /*#__PURE__*/ jsx("div", {
100
- className: "flex flex-col",
100
+ className: "gp-flex gp-flex-col",
101
101
  children: data.lineItems.map((line)=>{
102
102
  if (!line) return null;
103
103
  return /*#__PURE__*/ jsx(CartLineProvider, {
package/dist/esm/components/CartFooter.js CHANGED
@@ -22,10 +22,10 @@ const CartFooter = ({ checkoutUrl, price, openMode })=>{
22
22
  }
23
23
  };
24
24
  return /*#__PURE__*/ jsxs("div", {
25
- className: "flex flex-col gap-4 border-t border-t-g-line-3 bg-g-bg-2 px-6 pb-8 pt-4",
25
+ className: "gp-flex gp-flex-col gp-gap-4 gp-border-t gp-border-t-g-line-3 gp-bg-g-bg-2 gp-px-6 gp-pb-8 gp-pt-4",
26
26
  children: [
27
27
  /*#__PURE__*/ jsxs("div", {
28
- className: "g-paragraph-1 flex justify-between font-semibold",
28
+ className: "gp-g-paragraph-1 gp-flex gp-justify-between gp-font-semibold",
29
29
  children: [
30
30
  /*#__PURE__*/ jsx("span", {
31
31
  children: "Subtotal:"
@@ -40,7 +40,7 @@ const CartFooter = ({ checkoutUrl, price, openMode })=>{
40
40
  "aria-label": "Checkout",
41
41
  role: "button",
42
42
  "aria-hidden": "true",
43
- className: "g-paragraph-1 flex justify-between bg-g-brand px-4 py-3 font-semibold text-g-text-3",
43
+ className: "gp-g-paragraph-1 gp-flex gp-justify-between gp-bg-g-brand gp-px-4 gp-py-3 gp-font-semibold gp-text-g-text-3",
44
44
  onClick: ()=>openCheckout(600, 600),
45
45
  style: {
46
46
  ...composeRadius({
package/dist/esm/components/CartLineItem.js CHANGED
@@ -12,21 +12,21 @@ const CartLineItem = ()=>{
12
12
  const money = useMoney(line.variant?.price ? line.variant?.price : 0);
13
13
  const compareAtPrice = useMoney(line.variant?.listPrice ? line.variant?.listPrice : 0);
14
14
  return /*#__PURE__*/ jsxs("div", {
15
- className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent",
15
+ className: "gp-flex gp-items-center gp-gap-4 gp-border-b gp-border-b-g-line-2 gp-py-4 last:gp-border-b-transparent",
16
16
  children: [
17
17
  /*#__PURE__*/ jsx("div", {
18
- className: "aspect-square w-16",
18
+ className: "gp-aspect-square gp-w-16",
19
19
  children: line.variant?.image?.url && /*#__PURE__*/ jsx("img", {
20
- className: "h-full w-full object-cover",
20
+ className: "gp-h-full gp-w-full gp-object-cover",
21
21
  src: line.variant.image.url,
22
22
  alt: line.variant?.image?.altText ?? ''
23
23
  })
24
24
  }),
25
25
  /*#__PURE__*/ jsxs("div", {
26
- className: "flex-1",
26
+ className: "gp-flex-1",
27
27
  children: [
28
28
  /*#__PURE__*/ jsxs("p", {
29
- className: "line-clamp-2",
29
+ className: "gp-line-clamp-2",
30
30
  children: [
31
31
  line.productTitle,
32
32
  " ",
@@ -34,17 +34,17 @@ const CartLineItem = ()=>{
34
34
  ]
35
35
  }),
36
36
  /*#__PURE__*/ jsxs("div", {
37
- className: "flex flex-col gap-1 text-sm",
37
+ className: "gp-flex gp-flex-col gp-gap-1 gp-text-sm",
38
38
  children: [
39
39
  /*#__PURE__*/ jsxs("div", {
40
- className: "flex gap-2",
40
+ className: "gp-flex gp-gap-2",
41
41
  children: [
42
42
  /*#__PURE__*/ jsx("span", {
43
- className: "font-semibold",
43
+ className: "gp-font-semibold",
44
44
  children: money.localizedString
45
45
  }),
46
46
  line.variant?.listPrice > 0 && /*#__PURE__*/ jsx("span", {
47
- className: "text-[#B4B4B4] line-through",
47
+ className: "gp-text-[#B4B4B4] gp-line-through",
48
48
  children: compareAtPrice.localizedString
49
49
  })
50
50
  ]
@@ -59,7 +59,7 @@ const CartLineItem = ()=>{
59
59
  ]
60
60
  }),
61
61
  /*#__PURE__*/ jsxs("div", {
62
- className: "flex items-center justify-between",
62
+ className: "gp-flex gp-items-center gp-justify-between",
63
63
  children: [
64
64
  /*#__PURE__*/ jsx(CartLineItemQuantity, {
65
65
  size: "medium"
@@ -68,17 +68,17 @@ const CartLineItem = ()=>{
68
68
  onClick: ()=>{
69
69
  openConfirm({
70
70
  title: /*#__PURE__*/ jsxs("div", {
71
- className: "flex w-full flex-col items-center gap-4",
71
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
72
72
  children: [
73
73
  /*#__PURE__*/ jsx(Trash, {}),
74
74
  /*#__PURE__*/ jsx("p", {
75
- className: "font-g-body text-xl font-semibold",
75
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
76
76
  children: "Are you sure ?"
77
77
  })
78
78
  ]
79
79
  }),
80
80
  content: /*#__PURE__*/ jsxs("div", {
81
- className: "text-center",
81
+ className: "gp-text-center",
82
82
  children: [
83
83
  /*#__PURE__*/ jsx("p", {
84
84
  children: "Do you really want to delete these items?"
@@ -88,11 +88,11 @@ const CartLineItem = ()=>{
88
88
  })
89
89
  ]
90
90
  }),
91
- className: 'w-full max-w-[572px] gap-4 rounded',
91
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
92
92
  buttons: [
93
93
  {
94
94
  label: 'Cancel',
95
- className: 'w-[130px]',
95
+ className: 'gp-w-[130px]',
96
96
  styles: {
97
97
  backgroundColor: {
98
98
  normal: 'bg-1'
@@ -109,7 +109,7 @@ const CartLineItem = ()=>{
109
109
  },
110
110
  {
111
111
  label: 'Delete',
112
- className: 'w-[130px]',
112
+ className: 'gp-w-[130px]',
113
113
  styles: {
114
114
  textColor: {
115
115
  normal: 'text-3'
@@ -142,10 +142,10 @@ const CartLineItem = ()=>{
142
142
  title: "Remove item from cart",
143
143
  type: "button",
144
144
  children: loading ? /*#__PURE__*/ jsx(LoadingIcon, {
145
- className: "text-g-brand"
145
+ className: "gp-text-g-brand"
146
146
  }) : /*#__PURE__*/ jsx("svg", {
147
147
  xmlns: "http://www.w3.org/2000/svg",
148
- className: "w-4 text-gray-400",
148
+ className: "gp-w-4 gp-text-gray-400",
149
149
  fill: "none",
150
150
  viewBox: "0 0 24 24",
151
151
  stroke: "currentColor",
package/dist/esm/components/CartLineItemQuantity.js CHANGED
@@ -5,18 +5,18 @@ import CartLineQuantityAdjustButton from './CartLineQuantityAdjustButton.js';
5
5
  const CartLineItemQuantity = ({ size })=>{
6
6
  const line = useCartLine();
7
7
  return /*#__PURE__*/ jsxs("div", {
8
- className: cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
9
- 'h-12': size === 'large',
10
- 'h-10': size === 'medium',
11
- 'h-8': size === 'small'
8
+ className: cls('gp-mt-2 gp-inline-flex gp-items-center gp-overflow-auto gp-rounded gp-border gp-border-g-line-3 gp-text-g-text-1', {
9
+ 'gp-h-12': size === 'large',
10
+ 'gp-h-10': size === 'medium',
11
+ 'gp-h-8': size === 'small'
12
12
  }),
13
13
  children: [
14
14
  /*#__PURE__*/ jsx(CartLineQuantityAdjustButton, {
15
15
  adjust: "decrease",
16
16
  "aria-label": "Decrease quantity",
17
- className: "flex aspect-square h-full items-center justify-center",
17
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
18
18
  children: /*#__PURE__*/ jsx("svg", {
19
- className: "h-4",
19
+ className: "gp-h-4",
20
20
  fill: "currentColor",
21
21
  viewBox: "0 0 24 24",
22
22
  xmlns: "http://www.w3.org/2000/svg",
@@ -26,15 +26,15 @@ const CartLineItemQuantity = ({ size })=>{
26
26
  })
27
27
  }),
28
28
  /*#__PURE__*/ jsx("div", {
29
- className: "flex h-full min-w-[50px] select-none items-center justify-center border-x border-g-line-3 px-2 text-center text-base font-semibold",
29
+ className: "gp-flex gp-h-full gp-min-w-[50px] gp-select-none gp-items-center gp-justify-center gp-border-x gp-border-g-line-3 gp-px-2 gp-text-center gp-text-base gp-font-semibold",
30
30
  children: line.quantity
31
31
  }),
32
32
  /*#__PURE__*/ jsx(CartLineQuantityAdjustButton, {
33
33
  adjust: "increase",
34
34
  "aria-label": "Increase quantity",
35
- className: "flex aspect-square h-full items-center justify-center",
35
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
36
36
  children: /*#__PURE__*/ jsx("svg", {
37
- className: "h-4",
37
+ className: "gp-h-4",
38
38
  fill: "currentColor",
39
39
  viewBox: "0 0 24 24",
40
40
  xmlns: "http://www.w3.org/2000/svg",
package/dist/esm/components/CartLineQuantityAdjustButton.js CHANGED
@@ -22,17 +22,17 @@ import Trash from './icons/Trash.js';
22
22
  if (adjust === 'remove') {
23
23
  openConfirm({
24
24
  title: /*#__PURE__*/ jsxs("div", {
25
- className: "flex w-full flex-col items-center gap-4",
25
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
26
26
  children: [
27
27
  /*#__PURE__*/ jsx(Trash, {}),
28
28
  /*#__PURE__*/ jsx("p", {
29
- className: "font-g-body text-xl font-semibold",
29
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
30
30
  children: "Are you sure ?"
31
31
  })
32
32
  ]
33
33
  }),
34
34
  content: /*#__PURE__*/ jsxs("div", {
35
- className: "text-center",
35
+ className: "gp-text-center",
36
36
  children: [
37
37
  /*#__PURE__*/ jsx("p", {
38
38
  children: "Do you really want to delete this item?"
@@ -42,11 +42,11 @@ import Trash from './icons/Trash.js';
42
42
  })
43
43
  ]
44
44
  }),
45
- className: 'w-full max-w-[572px] gap-4 rounded',
45
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
46
46
  buttons: [
47
47
  {
48
48
  label: 'Cancel',
49
- className: 'w-[130px]',
49
+ className: 'gp-w-[130px]',
50
50
  styles: {
51
51
  backgroundColor: {
52
52
  normal: 'bg-1'
@@ -63,7 +63,7 @@ import Trash from './icons/Trash.js';
63
63
  },
64
64
  {
65
65
  label: 'Delete',
66
- className: 'w-[130px]',
66
+ className: 'gp-w-[130px]',
67
67
  styles: {
68
68
  textColor: {
69
69
  normal: 'text-3'
@@ -97,17 +97,17 @@ import Trash from './icons/Trash.js';
97
97
  if (quantity <= 0) {
98
98
  openConfirm({
99
99
  title: /*#__PURE__*/ jsxs("div", {
100
- className: "flex w-full flex-col items-center gap-4",
100
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
101
101
  children: [
102
102
  /*#__PURE__*/ jsx(Trash, {}),
103
103
  /*#__PURE__*/ jsx("p", {
104
- className: "font-g-body text-xl font-semibold",
104
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
105
105
  children: "Are you sure ?"
106
106
  })
107
107
  ]
108
108
  }),
109
109
  content: /*#__PURE__*/ jsxs("div", {
110
- className: "text-center",
110
+ className: "gp-text-center",
111
111
  children: [
112
112
  /*#__PURE__*/ jsx("p", {
113
113
  children: "Do you really want to delete this item?"
@@ -117,11 +117,11 @@ import Trash from './icons/Trash.js';
117
117
  })
118
118
  ]
119
119
  }),
120
- className: 'w-full max-w-[572px] gap-4 rounded',
120
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
121
121
  buttons: [
122
122
  {
123
123
  label: 'Cancel',
124
- className: 'w-[130px]',
124
+ className: 'gp-w-[130px]',
125
125
  styles: {
126
126
  backgroundColor: {
127
127
  normal: 'bg-1'
@@ -138,7 +138,7 @@ import Trash from './icons/Trash.js';
138
138
  },
139
139
  {
140
140
  label: 'Delete',
141
- className: 'w-[130px]',
141
+ className: 'gp-w-[130px]',
142
142
  styles: {
143
143
  textColor: {
144
144
  normal: 'text-3'
@@ -181,16 +181,16 @@ import Trash from './icons/Trash.js';
181
181
  }
182
182
  },
183
183
  children: isLoading ? /*#__PURE__*/ jsxs("div", {
184
- className: "flex gap-1",
184
+ className: "gp-flex gp-gap-1",
185
185
  children: [
186
186
  /*#__PURE__*/ jsx("span", {
187
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_alternate] rounded-full bg-g-brand"
187
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-g-brand"
188
188
  }),
189
189
  /*#__PURE__*/ jsx("span", {
190
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-g-brand"
190
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-g-brand"
191
191
  }),
192
192
  /*#__PURE__*/ jsx("span", {
193
- className: "aspect-square h-1 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-g-brand"
193
+ className: "gp-aspect-square gp-h-1 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-g-brand"
194
194
  })
195
195
  ]
196
196
  }) : children
package/dist/esm/components/CartOrderNote.js CHANGED
@@ -45,12 +45,12 @@ const CartOrderNote = ({ triggerUpdate, debounce, placeholder })=>{
45
45
  onChange
46
46
  };
47
47
  return /*#__PURE__*/ jsxs("div", {
48
- className: "flex flex-col",
48
+ className: "gp-flex gp-flex-col",
49
49
  children: [
50
50
  /*#__PURE__*/ jsx("div", {
51
- className: "mb-4 border-b border-b-[#F1F3F4] pb-3",
51
+ className: "gp-mb-4 gp-border-b gp-border-b-[#F1F3F4] gp-pb-3",
52
52
  children: /*#__PURE__*/ jsx("span", {
53
- className: "font-semibold text-[#424242]",
53
+ className: "gp-font-semibold gp-text-[#424242]",
54
54
  children: "Order Note"
55
55
  })
56
56
  }),
@@ -58,7 +58,7 @@ const CartOrderNote = ({ triggerUpdate, debounce, placeholder })=>{
58
58
  defaultValue: cart?.note,
59
59
  placeholder: placeholder,
60
60
  ref: textRef,
61
- className: "w-full rounded border p-4 outline-none",
61
+ className: "gp-w-full gp-rounded gp-border gp-p-4 gp-outline-none",
62
62
  ...inputProps
63
63
  })
64
64
  ]
package/dist/esm/components/DiscountCodeItem.js CHANGED
@@ -15,26 +15,26 @@ const DiscountCodeItem = ({ item })=>{
15
15
  const removeCode = useCallback((code)=>{
16
16
  openConfirm({
17
17
  title: /*#__PURE__*/ jsxs("div", {
18
- className: "flex w-full flex-col items-center gap-4",
18
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
19
19
  children: [
20
20
  /*#__PURE__*/ jsx(Trash, {}),
21
21
  /*#__PURE__*/ jsx("p", {
22
- className: "font-g-body text-xl font-semibold",
22
+ className: "gp-font-g-body gp-text-xl gp-font-semibold",
23
23
  children: "Are you sure ?"
24
24
  })
25
25
  ]
26
26
  }),
27
27
  content: /*#__PURE__*/ jsx("div", {
28
- className: "text-center",
28
+ className: "gp-text-center",
29
29
  children: /*#__PURE__*/ jsx("p", {
30
30
  children: "Do you really want to delete this code?"
31
31
  })
32
32
  }),
33
- className: 'w-full max-w-[572px] gap-4 rounded',
33
+ className: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
34
34
  buttons: [
35
35
  {
36
36
  label: 'Cancel',
37
- className: 'w-[130px]',
37
+ className: 'gp-w-[130px]',
38
38
  styles: {
39
39
  backgroundColor: {
40
40
  normal: 'bg-1'
@@ -51,7 +51,7 @@ const DiscountCodeItem = ({ item })=>{
51
51
  },
52
52
  {
53
53
  label: 'Delete',
54
- className: 'w-[130px]',
54
+ className: 'gp-w-[130px]',
55
55
  styles: {
56
56
  textColor: {
57
57
  normal: 'text-3'
@@ -85,23 +85,23 @@ const DiscountCodeItem = ({ item })=>{
85
85
  currentCode
86
86
  ]);
87
87
  return /*#__PURE__*/ jsxs("div", {
88
- className: "flex h-8 items-center gap-2 rounded-sm border pl-2",
88
+ className: "gp-flex gp-h-8 gp-items-center gp-gap-2 gp-rounded-sm gp-border gp-pl-2",
89
89
  children: [
90
90
  /*#__PURE__*/ jsx("span", {
91
- className: cls('flex-1', {
92
- 'text-g-error line-through': !item.applicable,
93
- 'text-g-success': item.applicable
91
+ className: cls('gp-flex-1', {
92
+ 'gp-text-g-error gp-line-through': !item.applicable,
93
+ 'gp-text-g-success': item.applicable
94
94
  }),
95
95
  children: item.code
96
96
  }),
97
97
  /*#__PURE__*/ jsx("button", {
98
98
  disabled: isMutating,
99
99
  onClick: ()=>removeCode(item.code),
100
- className: "flex aspect-square h-full items-center justify-center",
100
+ className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
101
101
  children: isMutating ? /*#__PURE__*/ jsx(LoadingIcon, {
102
- className: "text-g-brand"
102
+ className: "gp-text-g-brand"
103
103
  }) : /*#__PURE__*/ jsx("svg", {
104
- className: "w-4",
104
+ className: "gp-w-4",
105
105
  fill: "none",
106
106
  viewBox: "0 0 24 24",
107
107
  xmlns: "http://www.w3.org/2000/svg",
package/dist/esm/components/LoadingIcon.js CHANGED
@@ -2,13 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { cls } from '@gem-sdk/core';
3
3
 
4
4
  const LoadingIcon = ({ className })=>/*#__PURE__*/ jsxs("svg", {
5
- className: cls('w-4 animate-spin', className),
5
+ className: cls('gp-w-4 gp-animate-spin', className),
6
6
  xmlns: "http://www.w3.org/2000/svg",
7
7
  fill: "none",
8
8
  viewBox: "0 0 24 24",
9
9
  children: [
10
10
  /*#__PURE__*/ jsx("circle", {
11
- className: "opacity-25",
11
+ className: "gp-opacity-25",
12
12
  cx: "12",
13
13
  cy: "12",
14
14
  r: "10",
@@ -16,7 +16,7 @@ const LoadingIcon = ({ className })=>/*#__PURE__*/ jsxs("svg", {
16
16
  strokeWidth: "4"
17
17
  }),
18
18
  /*#__PURE__*/ jsx("path", {
19
- className: "opacity-75",
19
+ className: "gp-opacity-75",
20
20
  fill: "currentColor",
21
21
  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
22
22
  })
package/dist/esm/components/icons/Trash.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
 
3
3
  const Trash = ()=>/*#__PURE__*/ jsxs("svg", {
4
- className: "text-g-warning",
4
+ className: "gp-text-g-warning",
5
5
  width: "58",
6
6
  height: "66",
7
7
  viewBox: "0 0 58 66",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/plugin-cart-drawer",
3
- "version": "1.23.0",
3
+ "version": "1.35.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -19,9 +19,9 @@
19
19
  "test": "jest -c ./../../helpers/jest.config.ts"
20
20
  },
21
21
  "devDependencies": {
22
- "@gem-sdk/components": "1.23.0",
23
- "@gem-sdk/core": "1.23.0",
24
- "@gem-sdk/styles": "1.23.0"
22
+ "@gem-sdk/components": "1.35.0",
23
+ "@gem-sdk/core": "1.35.0",
24
+ "@gem-sdk/styles": "1.35.0"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "react": "^17 || ^18",