@logora/debate 0.4.26 → 0.4.29

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.
@@ -0,0 +1 @@
1
+ ._toolbar_awaxp_3{display:flex!important;justify-content:space-between!important;flex-wrap:wrap;background:var(--background-color-primary, white);padding-top:var(--spacer-md, calc(var(--space-unit, 1em) * .75))!important;vertical-align:middle;align-items:flex-start;gap:var(--space-unit, 1em)}._toolbar_awaxp_3._toolbarIsActive_awaxp_13{border-top:1px solid var(--text-tertiary, #fafafa)}._iconToolbar_awaxp_17{display:flex!important;gap:var(--spacer-lg, calc(var(--space-unit, 1em) * 1.5))}._iconToolbar_awaxp_17._shortBar_awaxp_21{gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75))}._toolbarItem_awaxp_25{border:0;background:none;padding:0!important;cursor:pointer;vertical-align:middle;touch-action:manipulation;display:flex;align-items:center;justify-content:center}@container (max-width: 575.98px){._toolbarItem_awaxp_25{min-width:44px;min-height:44px}}._toolbarItem_awaxp_25._disabled_awaxp_42{cursor:not-allowed}._toolbarItem_awaxp_25._active_awaxp_45{background-color:#bababa66;border-radius:50%}._toolbarItem_awaxp_25 ._format_awaxp_49{background-size:contain;display:inline-block;vertical-align:-.25em;display:flex!important}._actionButton_awaxp_56{display:flex!important;gap:var(--space-unit, 1em);margin-left:auto}._inputSubmitActionButton_awaxp_62{width:100%;height:35px;display:flex!important;justify-content:center!important;align-items:center!important;background-color:var(--call-primary-color, #434343)!important}._inputSubmitActionButton_awaxp_62._submitAction_awaxp_70 svg{fill:var(--text-light, white)!important}._inputSubmitActionButton_awaxp_62 ._inputSourceText_awaxp_73{display:none!important;margin-left:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))!important;font-size:var(--font-size-small, 16px)}@container (min-width: 576px){._inputSubmitActionButton_awaxp_62 ._inputSourceText_awaxp_73{display:block!important}}._tooltip_awaxp_84{width:230px!important;margin-left:-117px!important}
@@ -1,143 +1,134 @@
1
- import { jsxs as B, jsx as i } from "react/jsx-runtime";
2
- import { $isListNode as $, ListNode as W, INSERT_ORDERED_LIST_COMMAND as X, $isListItemNode as _, $createListNode as Y } from "@lexical/list";
3
- import { useLexicalComposerContext as Z } from "@lexical/react/LexicalComposerContext";
4
- import { $isHeadingNode as ee, $createQuoteNode as K } from "@lexical/rich-text";
5
- import { $setBlocksType as O } from "@lexical/selection";
6
- import { $getNearestNodeOfType as te, mergeRegister as oe } from "@lexical/utils";
7
- import n from "classnames";
8
- import { $getSelection as h, $isRangeSelection as p, SELECTION_CHANGE_COMMAND as ie, $createParagraphNode as R } from "lexical";
9
- import { useRef as ne, useState as N, useCallback as ae, useEffect as le } from "react";
10
- import { useIntl as se } from "react-intl";
1
+ import { jsxs as L, jsx as i } from "react/jsx-runtime";
2
+ import { $isListNode as k, ListNode as z, INSERT_ORDERED_LIST_COMMAND as G, $isListItemNode as w, $createListNode as X } from "@lexical/list";
3
+ import { useLexicalComposerContext as J } from "@lexical/react/LexicalComposerContext";
4
+ import { $isHeadingNode as W, $createQuoteNode as A } from "@lexical/rich-text";
5
+ import { $setBlocksType as v } from "@lexical/selection";
6
+ import { $getNearestNodeOfType as Y, mergeRegister as Z } from "@lexical/utils";
7
+ import a from "classnames";
8
+ import { $getSelection as N, $isRangeSelection as _, SELECTION_CHANGE_COMMAND as ee, FORMAT_TEXT_COMMAND as te, $createParagraphNode as E } from "lexical";
9
+ import { useRef as oe, useState as g, useCallback as ie, useEffect as ae } from "react";
10
+ import { useIntl as ne } from "react-intl";
11
11
  import e from "./ToolbarPlugin.module.scss.js";
12
- import { Icon as g } from "../../../icons/icon/Icon.js";
13
- import { Button as re } from "../../../action/button/Button.js";
14
- const Me = (s) => {
15
- const d = se(), q = 1, [r] = Z(), P = ne(null), [T, k] = N("paragraph"), [ce, U] = N(null), [F, v] = N(!1), [j, w] = N(!1), [H, C] = N(!1), A = s.hideSubmit && s.hideSourceAction && s.disableRichText, y = ae(() => {
16
- const t = h();
17
- if (p(t)) {
18
- const o = t.anchor.getNode(), c = o.getKey() === "root" ? o : o.getTopLevelElementOrThrow(), u = c.getKey();
19
- if (r.getElementByKey(u) !== null)
20
- if (U(u), $(c)) {
21
- const b = te(o, W), f = b ? b.getTag() : c.getTag();
22
- k(f);
12
+ import { Icon as u } from "../../../icons/icon/Icon.js";
13
+ import { Button as le } from "../../../action/button/Button.js";
14
+ const ye = (n) => {
15
+ const r = ne(), D = 1, [l] = J(), O = oe(null), [h, I] = g("paragraph"), [se, P] = g(null), [B, R] = g(!1), [$, q] = g(!1), [K, F] = g(!1), S = n.hideSubmit && n.hideSourceAction && n.disableRichText, p = ie(() => {
16
+ const t = N();
17
+ if (_(t)) {
18
+ const c = t.anchor.getNode(), s = c.getKey() === "root" ? c : c.getTopLevelElementOrThrow(), d = s.getKey();
19
+ if (l.getElementByKey(d) !== null)
20
+ if (P(d), k(s)) {
21
+ const o = Y(c, z), f = o ? o.getTag() : s.getTag();
22
+ I(f);
23
23
  } else {
24
- const b = ee(c) ? c.getTag() : c.getType();
25
- k(b);
24
+ const o = W(s) ? s.getTag() : s.getType();
25
+ I(o);
26
26
  }
27
- v(t.hasFormat("bold")), w(t.hasFormat("italic")), C(t.hasFormat("underline"));
27
+ R(t.hasFormat("bold")), q(t.hasFormat("italic")), F(t.hasFormat("underline"));
28
28
  }
29
- }, [r]);
30
- le(() => oe(
31
- r.registerUpdateListener(({ editorState: t }) => {
29
+ }, [l]);
30
+ ae(() => Z(
31
+ l.registerUpdateListener(({ editorState: t }) => {
32
32
  t.read(() => {
33
- y();
33
+ p();
34
34
  });
35
35
  }),
36
- r.registerCommand(
37
- ie,
38
- () => (y(), !1),
39
- q
36
+ l.registerCommand(
37
+ ee,
38
+ () => (p(), !1),
39
+ D
40
40
  )
41
- ), [r, y]);
42
- const a = (t) => {
43
- t.preventDefault();
44
- }, E = () => {
41
+ ), [l, p]);
42
+ const b = (t) => {
43
+ t.pointerType !== "touch" && t.pointerType !== "pen" && t.preventDefault();
44
+ }, x = () => {
45
45
  setTimeout(() => {
46
- r.getEditorState().read(() => {
47
- y();
46
+ l.getEditorState().read(() => {
47
+ p();
48
48
  });
49
49
  }, 0);
50
- }, M = (t) => {
51
- r.update(() => {
52
- const o = h();
53
- p(o) && o.formatText(t);
54
- }), t === "bold" && v((o) => !o), t === "italic" && w((o) => !o), t === "underline" && C((o) => !o);
55
- }, Q = () => {
56
- r.update(() => {
57
- const t = h();
58
- if (!p(t))
50
+ }, T = (t) => {
51
+ l.dispatchCommand(te, t);
52
+ }, U = () => {
53
+ l.update(() => {
54
+ const t = N();
55
+ if (!_(t))
59
56
  return;
60
- let o = t.anchor.getNode();
61
- for (; o !== null && !_(o); )
62
- o = o.getParent();
63
- const c = _(o) ? o.getKey() : null, u = t.getNodes(), I = /* @__PURE__ */ new Set();
64
- for (const m of u) {
65
- let l = m;
66
- for (; l !== null && !_(l); )
67
- l = l.getParent();
68
- _(l) && I.add(l);
57
+ const c = t.getNodes(), s = /* @__PURE__ */ new Set();
58
+ for (const m of c) {
59
+ let o = m;
60
+ for (; o !== null && !w(o); )
61
+ o = o.getParent();
62
+ w(o) && s.add(o);
69
63
  }
70
- const b = Array.from(I).reverse();
71
- let f = null;
72
- for (const m of b) {
73
- const l = m.getParent();
74
- if (!$(l))
64
+ const d = Array.from(s).reverse();
65
+ for (const m of d) {
66
+ const o = m.getParent();
67
+ if (!k(o))
75
68
  continue;
76
- const S = R(), G = m.getChildren();
77
- for (const x of G)
78
- S.append(x);
79
- const L = m.getNextSiblings();
80
- if (l.insertAfter(S), L.length > 0) {
81
- const x = L[0].getValue(), D = Y(l.getListType(), x);
82
- for (const J of L)
83
- D.append(J);
84
- S.insertAfter(D);
69
+ const f = E(), Q = m.getChildren();
70
+ for (const M of Q)
71
+ f.append(M);
72
+ const y = m.getNextSiblings();
73
+ if (o.insertAfter(f), y.length > 0) {
74
+ const M = y[0].getValue(), C = X(o.getListType(), M);
75
+ for (const V of y)
76
+ C.append(V);
77
+ f.insertAfter(C);
85
78
  }
86
- m.getKey() === c && (f = S), m.remove(), l.getChildrenSize() === 0 && l.remove();
79
+ m.remove(), o.getChildrenSize() === 0 && o.remove();
87
80
  }
88
- f !== null && f.selectEnd();
89
81
  });
90
- }, V = () => {
91
- T !== "ol" ? r.dispatchCommand(X) : Q(), E();
92
- }, z = () => {
93
- T !== "quote" ? r.update(() => {
94
- const t = h();
95
- if (p(t))
82
+ }, j = () => {
83
+ h !== "ol" ? l.dispatchCommand(G) : U(), x();
84
+ }, H = () => {
85
+ h !== "quote" ? l.update(() => {
86
+ const t = N();
87
+ if (_(t))
96
88
  if (t.isCollapsed()) {
97
- const c = t.anchor.getNode().getTopLevelElementOrThrow(), u = K();
98
- c.insertAfter(u), u.selectEnd();
89
+ const s = t.anchor.getNode().getTopLevelElementOrThrow(), d = A();
90
+ s.insertAfter(d), d.selectEnd();
99
91
  } else
100
- O(t, () => K());
101
- }) : r.update(() => {
102
- const t = h();
103
- p(t) && O(t, () => R());
104
- }), E();
92
+ v(t, () => A());
93
+ }) : l.update(() => {
94
+ const t = N();
95
+ _(t) && v(t, () => E());
96
+ }), x();
105
97
  };
106
- return A ? null : /* @__PURE__ */ B(
98
+ return S ? null : /* @__PURE__ */ L(
107
99
  "div",
108
100
  {
109
- className: n(e.toolbar, {
110
- [e.toolbarIsActive]: A ? !1 : s.isActive
101
+ className: a(e.toolbar, {
102
+ [e.toolbarIsActive]: S ? !1 : n.isActive
111
103
  }),
112
- ref: P,
104
+ ref: O,
113
105
  children: [
114
- s.isActive ? !s.disableRichText && /* @__PURE__ */ B(
106
+ n.isActive ? !n.disableRichText && /* @__PURE__ */ L(
115
107
  "div",
116
108
  {
117
- className: n(e.iconToolbar, {
118
- [e.shortBar]: s.shortBar
109
+ className: a(e.iconToolbar, {
110
+ [e.shortBar]: n.shortBar
119
111
  }),
120
112
  children: [
121
113
  /* @__PURE__ */ i(
122
114
  "button",
123
115
  {
124
- onTouchStart: a,
125
- onMouseDown: a,
126
- onClick: () => M("bold"),
116
+ onPointerDown: b,
117
+ onClick: () => T("bold"),
127
118
  type: "button",
128
- className: n(e.toolbarItem, { [e.active]: F }),
119
+ className: a(e.toolbarItem, { [e.active]: B }),
129
120
  "data-testid": "format-bold",
130
- "aria-label": d.formatMessage({
121
+ "aria-label": r.formatMessage({
131
122
  id: "input.text_editor.plugins.toolbar_plugin.bold.aria_label",
132
123
  defaultMessage: "Make text bold"
133
124
  }),
134
125
  children: /* @__PURE__ */ i(
135
- g,
126
+ u,
136
127
  {
137
128
  name: "bold",
138
129
  width: 24,
139
130
  height: 24,
140
- className: n(e.format, e.bold)
131
+ className: a(e.format, e.bold)
141
132
  }
142
133
  )
143
134
  }
@@ -145,24 +136,23 @@ const Me = (s) => {
145
136
  /* @__PURE__ */ i(
146
137
  "button",
147
138
  {
148
- onTouchStart: a,
149
- onMouseDown: a,
150
- onClick: () => M("italic"),
139
+ onPointerDown: b,
140
+ onClick: () => T("italic"),
151
141
  type: "button",
152
- className: n(e.toolbarItem, {
153
- [e.active]: j
142
+ className: a(e.toolbarItem, {
143
+ [e.active]: $
154
144
  }),
155
- "aria-label": d.formatMessage({
145
+ "aria-label": r.formatMessage({
156
146
  id: "input.text_editor.plugins.toolbar_plugin.italic.aria_label",
157
147
  defaultMessage: "Make text italic"
158
148
  }),
159
149
  children: /* @__PURE__ */ i(
160
- g,
150
+ u,
161
151
  {
162
152
  name: "italic",
163
153
  width: 24,
164
154
  height: 24,
165
- className: n(e.format, e.italic)
155
+ className: a(e.format, e.italic)
166
156
  }
167
157
  )
168
158
  }
@@ -170,24 +160,23 @@ const Me = (s) => {
170
160
  /* @__PURE__ */ i(
171
161
  "button",
172
162
  {
173
- onTouchStart: a,
174
- onMouseDown: a,
175
- onClick: () => M("underline"),
163
+ onPointerDown: b,
164
+ onClick: () => T("underline"),
176
165
  type: "button",
177
- className: n(e.toolbarItem, {
178
- [e.active]: H
166
+ className: a(e.toolbarItem, {
167
+ [e.active]: K
179
168
  }),
180
- "aria-label": d.formatMessage({
169
+ "aria-label": r.formatMessage({
181
170
  id: "input.text_editor.plugins.toolbar_plugin.underline.aria_label",
182
171
  defaultMessage: "Underline text"
183
172
  }),
184
173
  children: /* @__PURE__ */ i(
185
- g,
174
+ u,
186
175
  {
187
176
  name: "underline",
188
177
  width: 24,
189
178
  height: 24,
190
- className: n(e.format, e.underline)
179
+ className: a(e.format, e.underline)
191
180
  }
192
181
  )
193
182
  }
@@ -195,24 +184,23 @@ const Me = (s) => {
195
184
  /* @__PURE__ */ i(
196
185
  "button",
197
186
  {
198
- onTouchStart: a,
199
- onMouseDown: a,
200
- onClick: () => z(),
187
+ onPointerDown: b,
188
+ onClick: () => H(),
201
189
  type: "button",
202
- className: n(e.toolbarItem, {
203
- [e.active]: T === "quote"
190
+ className: a(e.toolbarItem, {
191
+ [e.active]: h === "quote"
204
192
  }),
205
- "aria-label": d.formatMessage({
193
+ "aria-label": r.formatMessage({
206
194
  id: "input.text_editor.plugins.toolbar_plugin.blockquote.aria_label",
207
195
  defaultMessage: "Add a blockquote"
208
196
  }),
209
197
  children: /* @__PURE__ */ i(
210
- g,
198
+ u,
211
199
  {
212
200
  name: "blockquote",
213
201
  width: 24,
214
202
  height: 24,
215
- className: n(e.format, e.quote)
203
+ className: a(e.format, e.quote)
216
204
  }
217
205
  )
218
206
  }
@@ -220,47 +208,45 @@ const Me = (s) => {
220
208
  /* @__PURE__ */ i(
221
209
  "button",
222
210
  {
223
- onTouchStart: a,
224
- onMouseDown: a,
225
- onClick: () => V(),
211
+ onPointerDown: b,
212
+ onClick: () => j(),
226
213
  type: "button",
227
- className: n(e.toolbarItem, {
228
- [e.active]: T === "ol"
214
+ className: a(e.toolbarItem, {
215
+ [e.active]: h === "ol"
229
216
  }),
230
- "aria-label": d.formatMessage({
217
+ "aria-label": r.formatMessage({
231
218
  id: "input.text_editor.plugins.toolbar_plugin.numbered_list.aria_label",
232
219
  defaultMessage: "Insert a numbered list"
233
220
  }),
234
221
  children: /* @__PURE__ */ i(
235
- g,
222
+ u,
236
223
  {
237
224
  name: "orderedList",
238
225
  width: 24,
239
226
  height: 24,
240
- className: n(e.format, e.numberedList)
227
+ className: a(e.format, e.numberedList)
241
228
  }
242
229
  )
243
230
  }
244
231
  ),
245
- !s.hideSourceAction && /* @__PURE__ */ i(
232
+ !n.hideSourceAction && /* @__PURE__ */ i(
246
233
  "button",
247
234
  {
248
- onTouchStart: a,
249
- onMouseDown: a,
250
- onClick: s.onAddSource,
235
+ onPointerDown: b,
236
+ onClick: n.onAddSource,
251
237
  type: "button",
252
238
  className: e.toolbarItem,
253
- "aria-label": d.formatMessage({
239
+ "aria-label": r.formatMessage({
254
240
  id: "input.text_editor.plugins.toolbar_plugin.add_link.aria_label",
255
241
  defaultMessage: "Add hyperlink"
256
242
  }),
257
243
  children: /* @__PURE__ */ i(
258
- g,
244
+ u,
259
245
  {
260
246
  name: "link",
261
247
  width: 20,
262
248
  height: 20,
263
- className: n(e.format, e.link)
249
+ className: a(e.format, e.link)
264
250
  }
265
251
  )
266
252
  }
@@ -268,18 +254,18 @@ const Me = (s) => {
268
254
  ]
269
255
  }
270
256
  ) : null,
271
- /* @__PURE__ */ i("div", { className: e.actionButton, children: s.hideSubmit ? null : /* @__PURE__ */ i(
272
- re,
257
+ /* @__PURE__ */ i("div", { className: e.actionButton, children: n.hideSubmit ? null : /* @__PURE__ */ i(
258
+ le,
273
259
  {
274
260
  type: "button",
275
261
  "data-testid": "submit-button",
276
- handleClick: s.onSubmit,
277
- className: n(e.inputSubmitActionButton, e.submitAction),
278
- "aria-label": d.formatMessage({
262
+ handleClick: n.onSubmit,
263
+ className: a(e.inputSubmitActionButton, e.submitAction),
264
+ "aria-label": r.formatMessage({
279
265
  id: "input.text_editor.plugins.toolbar_plugin.submit_button.aria_label",
280
266
  defaultMessage: "Send message"
281
267
  }),
282
- children: /* @__PURE__ */ i(g, { name: "send", width: 20, height: 20 })
268
+ children: /* @__PURE__ */ i(u, { name: "send", width: 20, height: 20 })
283
269
  }
284
270
  ) })
285
271
  ]
@@ -287,5 +273,5 @@ const Me = (s) => {
287
273
  );
288
274
  };
289
275
  export {
290
- Me as ToolbarPlugin
276
+ ye as ToolbarPlugin
291
277
  };
@@ -1,25 +1,25 @@
1
- import '../../../../assets/components/input/text_editor/plugins/ToolbarPlugin.module-CjkE3oe-.css';const t = "_toolbar_13b6u_3", o = "_toolbarIsActive_13b6u_13", n = "_iconToolbar_13b6u_17", _ = "_shortBar_13b6u_21", c = "_toolbarItem_13b6u_25", b = "_active_13b6u_45", i = "_format_13b6u_49", a = "_actionButton_13b6u_56", u = "_inputSubmitActionButton_13b6u_62", s = "_submitAction_13b6u_70", r = {
1
+ import '../../../../assets/components/input/text_editor/plugins/ToolbarPlugin.module-C3yG2biv.css';const t = "_toolbar_awaxp_3", o = "_toolbarIsActive_awaxp_13", a = "_iconToolbar_awaxp_17", n = "_shortBar_awaxp_21", _ = "_toolbarItem_awaxp_25", c = "_active_awaxp_45", i = "_format_awaxp_49", s = "_actionButton_awaxp_56", r = "_inputSubmitActionButton_awaxp_62", b = "_submitAction_awaxp_70", u = {
2
2
  toolbar: t,
3
3
  toolbarIsActive: o,
4
- iconToolbar: n,
5
- shortBar: _,
6
- toolbarItem: c,
7
- active: b,
4
+ iconToolbar: a,
5
+ shortBar: n,
6
+ toolbarItem: _,
7
+ active: c,
8
8
  format: i,
9
- actionButton: a,
10
- inputSubmitActionButton: u,
11
- submitAction: s
9
+ actionButton: s,
10
+ inputSubmitActionButton: r,
11
+ submitAction: b
12
12
  };
13
13
  export {
14
- a as actionButton,
15
- b as active,
16
- r as default,
14
+ s as actionButton,
15
+ c as active,
16
+ u as default,
17
17
  i as format,
18
- n as iconToolbar,
19
- u as inputSubmitActionButton,
20
- _ as shortBar,
21
- s as submitAction,
18
+ a as iconToolbar,
19
+ r as inputSubmitActionButton,
20
+ n as shortBar,
21
+ b as submitAction,
22
22
  t as toolbar,
23
23
  o as toolbarIsActive,
24
- c as toolbarItem
24
+ _ as toolbarItem
25
25
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logora/debate",
3
- "version": "0.4.26",
3
+ "version": "0.4.29",
4
4
  "type": "module",
5
5
  "license": "AGPL-3.0",
6
6
  "description": "Design system of @Logora made with React",
@@ -1 +0,0 @@
1
- ._toolbar_13b6u_3{display:flex!important;justify-content:space-between!important;flex-wrap:wrap;background:var(--background-color-primary, white);padding-top:var(--spacer-md, calc(var(--space-unit, 1em) * .75))!important;vertical-align:middle;align-items:flex-start;gap:var(--space-unit, 1em)}._toolbar_13b6u_3._toolbarIsActive_13b6u_13{border-top:1px solid var(--text-tertiary, #fafafa)}._iconToolbar_13b6u_17{display:flex!important;gap:var(--spacer-lg, calc(var(--space-unit, 1em) * 1.5))}._iconToolbar_13b6u_17._shortBar_13b6u_21{gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75))}._toolbarItem_13b6u_25{border:0;background:none;padding:0!important;cursor:pointer;vertical-align:middle;touch-action:manipulation;display:flex;align-items:center;justify-content:center}@media(max-width:576px){._toolbarItem_13b6u_25{min-width:44px;min-height:44px}}._toolbarItem_13b6u_25._disabled_13b6u_42{cursor:not-allowed}._toolbarItem_13b6u_25._active_13b6u_45{background-color:#bababa66;border-radius:50%}._toolbarItem_13b6u_25 ._format_13b6u_49{background-size:contain;display:inline-block;vertical-align:-.25em;display:flex!important}._actionButton_13b6u_56{display:flex!important;gap:var(--space-unit, 1em);margin-left:auto}._inputSubmitActionButton_13b6u_62{width:100%;height:35px;display:flex!important;justify-content:center!important;align-items:center!important;background-color:var(--call-primary-color, #434343)!important}._inputSubmitActionButton_13b6u_62._submitAction_13b6u_70 svg{fill:var(--text-light, white)!important}._inputSubmitActionButton_13b6u_62 ._inputSourceText_13b6u_73{display:none!important;margin-left:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))!important;font-size:var(--font-size-small, 16px)}@container (min-width: 576px){._inputSubmitActionButton_13b6u_62 ._inputSourceText_13b6u_73{display:block!important}}._tooltip_13b6u_84{width:230px!important;margin-left:-117px!important}