@rededor/cura 0.5.2 → 0.5.3

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js

@@ -0,0 +1,196 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const renderCuraCheckbox = (label, message, args) => {
+  const block = `<cura-checkbox${label ? `
+  label="${label}"` : ''}${args.size && args.size !== 'medium' ? `
+  size="${args.size}"` : ''}${args.status && args.status !== 'default' ? `
+  status="${args.status}"` : ''}${args.position && args.position !== 'left' ? `
+  position="${args.position}"` : ''}${args.color && args.color !== 'accent' ? `
+  color="${args.color}"` : ''}${args.background && args.background !== 'light' ? `
+  background="${args.background}"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `
+  icon-color="${args.iconColor}"` : ''}${args.value ? `
+  value="${args.value}"` : ''}${args.ontabindex ? `
+  ontabindex="${args.ontabindex}"` : ''}${args.checked ? `
+  checked="${args.checked}"` : ''}${args.required ? `
+  required="${args.required}"` : ''}${args.indeterminate ? `
+  indeterminate="${args.indeterminate}"` : ''}${args.disabled ? `
+  disabled="${args.disabled}"` : ''}>${message ? `
+  ${message}` : ''}
+</cura-checkbox>
+`;
+  return `${block}`;
+};
+export default {
+  title: 'Componentes/Forms/Checkbox',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label, message } = _a, args = __rest(_a, ["label", "message"]);
+    return renderCuraCheckbox(label, message, args);
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Título do checkbox.',
+      name: 'label',
+      table: {
+        category: 'Properties',
+      },
+    },
+    message: {
+      control: 'text',
+      name: 'Info text',
+      description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',
+      table: {
+        category: 'Slots',
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Define o checkbox como marcado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: false },
+      },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: false }
+      },
+    },
+    status: {
+      control: { type: 'select' },
+      options: ['default', 'success', 'error'],
+      description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'default' },
+      },
+    },
+    indeterminate: {
+      control: 'boolean',
+      description: 'Define se o checkbox está em estado indeterminado de seleção.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Define se o checkbox está desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: false },
+      },
+    },
+    ontabindex: {
+      control: 'number',
+      description: 'Índice de tabulação do checkbox.',
+      table: {
+        category: 'Properties',
+      },
+      name: 'ontabindex'
+    },
+    position: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do box em relação ao controle.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'position'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor do checkbox.',
+      table: {
+        category: 'Properties',
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Nome do checkbox.',
+      table: {
+        category: 'Properties',
+      },
+    },
+    background: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'light' }
+      }
+    },
+    iconColor: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',
+      name: 'icon-color',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' },
+      },
+    },
+    onchange: {
+      control: 'none',
+      description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',
+      table: {
+        category: 'Event',
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+export const Checkbox = {
+  args: {
+    label: 'Checkbox',
+    size: 'medium',
+    status: 'default',
+    color: 'accent',
+    position: 'left',
+    background: 'light',
+    iconColor: 'dark',
+    value: '',
+    name: '',
+    ontabindex: 0,
+    message: 'Helper text',
+    checked: false,
+    required: false,
+    indeterminate: false,
+    disabled: false,
+  },
+};
+//# sourceMappingURL=cura-checkbox.stories.js.map

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraCheckbox = (label: string, message: string, args: any) => {\n  const block = `<cura-checkbox${label ? `\n  label=\"${label}\"` : ''}${args.size && args.size !== 'medium' ? `\n  size=\"${args.size}\"` : ''}${args.status && args.status !== 'default' ? `\n  status=\"${args.status}\"` : ''}${args.position && args.position !== 'left' ? `\n  position=\"${args.position}\"` : ''}${args.color && args.color !== 'accent' ? `\n  color=\"${args.color}\"` : ''}${args.background && args.background !== 'light' ? `\n  background=\"${args.background}\"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `\n  icon-color=\"${args.iconColor}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.ontabindex ? `\n  ontabindex=\"${args.ontabindex}\"` : ''}${args.checked ? `\n  checked=\"${args.checked}\"` : ''}${args.required ? `\n  required=\"${args.required}\"` : ''}${args.indeterminate ? `\n  indeterminate=\"${args.indeterminate}\"` : ''}${args.disabled ? `\n  disabled=\"${args.disabled}\"` : ''}>${message ? `\n  ${message}` : ''}\n</cura-checkbox>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Forms/Checkbox',\n  tags: ['autodocs'],\n  render: ({ label, message, ...args }) => {\n    return renderCuraCheckbox(label, message, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Título do checkbox.',\n      name: 'label',\n      table: {\n        category: 'Properties',\n      },\n    },\n    message: {\n      control: 'text',\n      name: 'Info text',\n      description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Define o checkbox como marcado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false }\n      },\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['default', 'success', 'error'],\n      description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    indeterminate: {\n      control: 'boolean',\n      description: 'Define se o checkbox está em estado indeterminado de seleção.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Define se o checkbox está desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    ontabindex: {\n      control: 'number',\n      description: 'Índice de tabulação do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'ontabindex'\n    },\n    position: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do box em relação ao controle.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left' }\n      },\n      name: 'position'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' }\n      }\n    },\n    value: {\n      control: 'text',\n      description: 'Valor do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Nome do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    background: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' }\n      }\n    },\n    iconColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',\n      name: 'icon-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark' }\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent' },\n      },\n    },\n    onchange: {\n      control: 'none',\n      description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',\n      table: {\n        category: 'Event',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const Checkbox = {\n  args: {\n    label: 'Checkbox',\n    size: 'medium',\n    status: 'default',\n    color: 'accent',\n    position: 'left',\n    background: 'light',\n    iconColor: 'dark',\n    value: '',\n    name: '',\n    ontabindex: 0,\n    message: 'Helper text',\n    checked: false,\n    required: false,\n    indeterminate: false,\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/forms/cura-forms.definitions.js

@@ -0,0 +1,15 @@
+export const formsSizes = {
+  "large": {
+    size: 32,
+    gap: 16,
+  },
+  "medium": {
+    size: 24,
+    gap: 12,
+  },
+  "small": {
+    size: 20,
+    gap: 8,
+  },
+};
+//# sourceMappingURL=cura-forms.definitions.js.map

package/dist/collection/components/forms/cura-forms.definitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-forms.definitions.js","sourceRoot":"","sources":["../../../src/components/forms/cura-forms.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;EACxB,OAAO,EAAE;IACP,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,EAAE;GACR;EACD,QAAQ,EAAE;IACR,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,EAAE;GACR;EACD,OAAO,EAAE;IACP,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,CAAC;GACP;CACF,CAAC","sourcesContent":["export const formsSizes = {\n  \"large\": {\n    size: 32,\n    gap: 16,\n  },\n  \"medium\": {\n    size: 24,\n    gap: 12,\n  },\n  \"small\": {\n    size: 20,\n    gap: 8,\n  },\n};\n"]}

package/dist/collection/components/forms/cura-input-text/cura-input-text.css

@@ -0,0 +1,326 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.required {
+  color: var(--error-base);
+}
+
+.cura-input-group {
+  width: 100%;
+  font-family: var(--font-family);
+  text-align: left !important;
+}
+.cura-input-group cura-label {
+  margin-bottom: 8px;
+}
+.cura-input-group .helper-text {
+  margin-top: 8px;
+  font-size: 12px;
+  font-family: var(--font-family);
+  color: var(--neutral-dark);
+}
+.cura-input-group .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.cura-input-group .cura-input-field input {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  text-overflow: ellipsis;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  font-style: normal;
+  line-height: 20px;
+  letter-spacing: 0.32px;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group .cura-input-field input input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group .cura-input-field cura-loader-circle {
+  margin: 0px 12px;
+}
+.cura-input-group .cura-input-field .feedback-icon {
+  padding-left: 12px;
+  padding-top: 6px;
+}
+.cura-input-group .cura-input-field .clear-button {
+  padding-right: 12px;
+  cursor: pointer;
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field {
+  border-color: var(--neutral-dark);
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input {
+  color: var(--neutral-dark);
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) ::slotted(cura-label) {
+  color: var(--neutral-black);
+}
+.cura-input-group.isFocused .cura-input-field,
+.cura-input-group :focus-within :not(.readOnly) .cura-input-field {
+  border: 2px solid var(--info-base);
+  background-color: var(--neutral-purewhite);
+  outline: none;
+}
+.cura-input-group.isFocused .cura-input-field input,
+.cura-input-group :focus-within :not(.readOnly) .cura-input-field input {
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  color: var(--neutral-black);
+}
+.cura-input-group.isFocused .helper-text,
+.cura-input-group :focus-within :not(.readOnly) .helper-text {
+  color: var(--neutral-black);
+}
+.cura-input-group.isSuccess .cura-input-field {
+  border: 2px solid var(--success-dark);
+  background-color: var(--success-lighter);
+  overflow: hidden;
+}
+.cura-input-group.isSuccess .cura-input-field input {
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  color: var(--success-darker);
+}
+.cura-input-group.isSuccess .cura-input-field input::placeholder {
+  color: var(--success-darker);
+}
+.cura-input-group.isSuccess .helper-text {
+  color: var(--success-dark);
+}
+.cura-input-group.isError .cura-input-field {
+  border: 2px solid var(--error-dark);
+  background-color: var(--error-lighter);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.cura-input-group.isError .cura-input-field input {
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  color: var(--error-darker);
+}
+.cura-input-group.isError .cura-input-field input::placeholder {
+  color: var(--error-darker);
+}
+.cura-input-group.isError .helper-text {
+  color: var(--error-dark);
+}
+.cura-input-group.isLoading {
+  cursor: wait;
+}
+.cura-input-group.isLoading .cura-input-field {
+  background-color: var(--neutral-white);
+  border: 2px solid var(--primary-base);
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.cura-input-group.isLoading .cura-input-field input {
+  cursor: wait;
+  color: var(--primary-base);
+}
+.cura-input-group.isLoading input::placeholder {
+  color: var(--primary-base);
+}
+.cura-input-group.isLoading .helper-text {
+  color: var(--primary-base);
+}
+.cura-input-group.disabled .cura-input-field {
+  background-color: var(--neutral-white);
+  border: 2px solid var(--neutral-base);
+  color: var(--neutral-medium);
+}
+.cura-input-group.disabled .cura-input-field input {
+  color: var(--neutral-medium);
+}
+.cura-input-group.disabled .cura-input-field input::placeholder {
+  color: var(--neutral-medium);
+}
+.cura-input-group.readOnly[read-only] .cura-input-field {
+  cursor: default;
+}
+.cura-input-group.readOnly[read-only] .cura-input-field input {
+  cursor: default;
+}
+.cura-input-group.readOnly[read-only] .helper-text {
+  color: var(--neutral-dark);
+}
+.cura-input-group.transparent {
+  display: flex;
+  background-color: transparent;
+  padding: 0px;
+  justify-content: start;
+  align-items: center;
+  min-width: 300px;
+  max-height: 80px;
+  gap: 4px;
+}
+.cura-input-group.transparent .input-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: start;
+}
+.cura-input-group.transparent cura-label {
+  margin-bottom: 4px;
+}
+.cura-input-group.transparent .cura-input-field {
+  display: flex;
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--primary-base);
+  height: 27px;
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.cura-input-group.transparent .cura-input-field input {
+  order: 1;
+  color: var(--neutral-black);
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+  line-height: 20px;
+  letter-spacing: 0.32px;
+  padding: 0;
+}
+.cura-input-group.transparent .cura-input-field input::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  letter-spacing: 0.32px;
+  color: var(--neutral-black);
+}
+.cura-input-group.transparent .cura-input-field .clear-button {
+  order: 2;
+  cursor: pointer;
+  margin: 0 20px 0 0;
+  padding: 0;
+}
+.cura-input-group.transparent .cura-input-field .feedback-icon {
+  order: 3;
+  margin: 0 20px 0 0;
+  padding: 6px 0 0 0;
+}
+.cura-input-group.transparent .cura-input-field cura-loader-circle {
+  order: 2;
+  margin: 0 20px 0 0;
+}
+.cura-input-group.transparent .helper-text {
+  margin-top: 0px;
+}
+.cura-input-group.transparent.isError .cura-input-field {
+  overflow: hidden;
+}
+.cura-input-group.transparent.isError .clear-button {
+  cursor: pointer;
+  margin: 0 16px 0 0;
+}
+.cura-input-group.transparent.isError input {
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  color: var(--error-darker);
+}
+.cura-input-group.transparent.isError input::placeholder {
+  color: var(--error-darker);
+}
+.cura-input-group.transparent.isSuccess .cura-input-field {
+  overflow: hidden;
+}
+.cura-input-group.transparent.isSuccess .clear-button {
+  cursor: pointer;
+  margin: 0 16px 0 0;
+}
+.cura-input-group.transparent.isSuccess input {
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  color: var(--success-darker);
+}
+.cura-input-group.transparent.isSuccess input::placeholder {
+  color: var(--success-darker);
+}
+.cura-input-group.transparent.disabled .cura-input-field {
+  color: var(--neutral-medium);
+}
+.cura-input-group.transparent.disabled .cura-input-field input {
+  color: var(--neutral-medium);
+}
+.cura-input-group.transparent.disabled .cura-input-field input::placeholder {
+  color: var(--neutral-medium);
+}
+.cura-input-group.transparent.disabled .cura-input-field .helper-text {
+  color: var(--neutral-medium);
+}
+.cura-input-group.small .cura-input-field {
+  height: 32px;
+}
+.cura-input-group.small .cura-input-field input {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 12px;
+  font-style: normal;
+  line-height: 13px;
+  letter-spacing: 0.72px;
+}
+.cura-input-group.small .helper-text {
+  font-weight: var(--font-weight-regular);
+}
+.cura-input-group.medium .cura-input-field {
+  height: 40px;
+}
+.cura-input-group.medium .cura-input-field input {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  font-style: normal;
+  line-height: 16px;
+  letter-spacing: 0.56px;
+}
+.cura-input-group.medium .helper-text {
+  font-weight: var(--font-weight-regular);
+}
+.cura-input-group.large .cura-input-field {
+  height: 44px;
+}
+.cura-input-group.large input::placeholder {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  font-style: normal;
+  line-height: 20px;
+  letter-spacing: 0.32px;
+}
+.cura-input-group.large .helper-text {
+  font-weight: var(--font-weight-bold);
+}
+.cura-input-group input::-webkit-outer-spin-button,
+.cura-input-group input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}