@arkyn/components 1.3.27 → 1.3.29

package/src/{components → newComponents}/Input/CurrencyInput/index.tsx

@@ -3,7 +3,7 @@ import type { FocusEvent, KeyboardEvent } from "react";
 
 import { useRef, useState } from "react";
 
-import { useFormController } from "../../Form/FormController";
+import { useFormController } from "../../../newComponents/Form/FormController";
 import { getConfig } from "./getConfig";
 import { currencyInputKeyDown, valueDisplay } from "./utils";
 

package/src/{components → newComponents}/Input/MaskInput/index.tsx

@@ -4,7 +4,7 @@ import type { FocusEvent, InputHTMLAttributes } from "react";
 import { InputMask } from "@react-input/mask";
 import { forwardRef, useRef, useState } from "react";
 
-import { useFormController } from "../../Form/FormController";
+import { useFormController } from "../../../newComponents/Form/FormController";
 import { getConfig } from "./getConfig";
 
 const BaseInput = forwardRef<

package/src/{components → newComponents}/Input/SimpleInput/index.tsx

@@ -3,7 +3,7 @@ import type { FocusEvent } from "react";
 
 import { useRef, useState } from "react";
 
-import { useFormController } from "../../Form/FormController";
+import { useFormController } from "../../../newComponents/Form/FormController";
 import { getConfig } from "./getConfig";
 
 function SimpleInput(props: SimpleInputProps) {

package/src/{components → newComponents}/Input/styles.css

@@ -25,13 +25,13 @@
 }
 
 .arkyn_input input {
-  color: var(--secondary-900);
+  color: var(--text-heading);
 }
 
 .arkyn_input .prefix,
 .arkyn_input .sufix {
-  color: var(--secondary-600);
-  background: var(--secondary-200);
+  color: var(--text-body);
+  background: var(--border);
   font-weight: 400;
 
   display: flex;
@@ -46,7 +46,7 @@
   top: 0;
   bottom: 0;
   border-radius: 5px 0 0 5px;
-  border-right: 1px solid var(--secondary-300);
+  border-right: 1px solid var(--border);
 }
 
 .arkyn_input .sufix {
@@ -54,23 +54,23 @@
   top: 0;
   bottom: 0;
   border-radius: 0 5px 5px 0;
-  border-left: 1px solid var(--secondary-300);
+  border-left: 1px solid var(--border);
 }
 
 .arkyn_input input::placeholder {
-  color: var(--secondary-400);
+  color: var(--text-light);
 }
 
 .arkyn_input svg {
-  color: var(--secondary-400);
+  color: var(--text-light);
 }
 
 .arkyn_input.errored svg {
-  color: var(--danger-600);
+  color: rgba(var(--spotlights-danger), 1);
 }
 
 .arkyn_input:not(.opacity).focused svg {
-  color: var(--primary-500);
+  color: rgba(var(--spotlights-primary), 1);
 }
 
 .arkyn_input.opacity {
@@ -79,32 +79,32 @@
 
 /* VARIANTS */
 .arkyn_input.solid {
-  border-color: var(--secondary-300);
-  background-color: var(--secondary-50);
+  border-color: var(--border);
+  background-color: var(--background);
 }
 
 .arkyn_input.solid.errored {
-  border-color: var(--danger-600);
-  outline-color: var(--danger-600);
+  border-color: rgba(var(--spotlights-danger), 1);
+  outline-color: rgba(var(--spotlights-danger), 1);
 }
 
 .arkyn_input:not(.opacity).solid.focused {
-  border-color: var(--primary-500);
-  outline-color: var(--primary-500);
+  border-color: rgba(var(--spotlights-primary), 1);
+  outline-color: rgba(var(--spotlights-primary), 1);
 }
 
 .arkyn_input.outline {
-  border-color: var(--secondary-300);
+  border-color: var(--border);
 }
 
 .arkyn_input.outline.errored {
-  border-color: var(--danger-600);
-  outline-color: var(--danger-600);
+  border-color: rgba(var(--spotlights-danger), 1);
+  outline-color: rgba(var(--spotlights-danger), 1);
 }
 
 .arkyn_input:not(.opacity).outline.focused {
-  border-color: var(--primary-500);
-  outline-color: var(--primary-500);
+  border-color: rgba(var(--spotlights-primary), 1);
+  outline-color: rgba(var(--spotlights-primary), 1);
 }
 
 .arkyn_input.underline {
@@ -113,7 +113,7 @@
   border-left: none;
   border-right: none;
   outline: none;
-  border-color: var(--secondary-300);
+  border-color: var(--border);
 }
 
 .arkyn_input.underline .sufix,
@@ -132,23 +132,22 @@
 }
 
 .arkyn_input.underline.errored {
-  border-color: var(--danger-600);
+  border-color: rgba(var(--spotlights-danger), 1);
 }
 
 .arkyn_input.underline.errored::before {
-  background: var(--danger-600);
+  background: rgba(var(--spotlights-danger), 1);
 }
 
 .arkyn_input:not(.opacity).underline.focused {
-  border-color: var(--primary-500);
+  border-color: rgba(var(--spotlights-primary), 1);
 }
 
 .arkyn_input:not(.opacity).underline.focused::before {
-  background: var(--primary-500);
+  background: rgba(var(--spotlights-primary), 1);
 }
 
 /* SIZE */
-
 .arkyn_input.md input {
   min-height: 40px;
   max-height: 40px;
@@ -208,7 +207,6 @@
 }
 
 /* SPIN */
-
 .arkyn_input .spinner {
   animation: spin 2s linear infinite;
 }

package/dist/components/Breadcrumb/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMzE,OAAO,cAAc,CAAC;AAEtB,iBAAS,UAAU,CAAC,IAAI,EAAE,eAAe,2CAGxC;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CAmBhD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Checkbox/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,OAAO,cAAc,CAAC;AAEtB,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAyCrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Divider/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,IAAI,EAAE,YAAY,2CAUlC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Form/FormController/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormController/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAKtB,OAAO,cAAc,CAAC;AAItB,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,2CAiBjE;AAED,iBAAS,iBAAiB,+BAEzB;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Form/FormError/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAK9C;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Form/FormLabel/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,cAAc,CAAC;AAEtB,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAGvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Form/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/IconButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,cAAc,CAAC;AAStB,iBAAS,UAAU,CAAC,IAAI,EAAE,eAAe,2CA6BxC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Input/CpfCpnjInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CpfCpnjInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAStD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAmG7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Input/CpfCpnjInput/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CpfCpnjInput/utils.ts"],"names":[],"mappings":"AAAA,iBAAS,KAAK,CAAC,KAAK,EAAE,MAAM,UAE3B;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,MAAM,UAYrD;AAED,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAE9C;AAED,QAAA,MAAM,KAAK;;;CAGV,CAAC;AAEF,QAAA,MAAM,UAAU,QAA2B,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Input/CurrencyInput/getConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAKvD,iBAAS,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwD/D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Input/CurrencyInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AASvD,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA6F/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Input/CurrencyInput/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,iBAAS,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,UAUzD;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,cAAc,QA4BjD;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/Input/MaskInput/getConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/MaskInput/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKrD,iBAAS,SAAS,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuD7D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Input/MaskInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/MaskInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAgBrD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2E3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Input/SimpleInput/getConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/SimpleInput/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKrD,iBAAS,SAAS,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoD7D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Input/SimpleInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/SimpleInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQrD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkF3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO/C,OAAO,cAAc,CAAC;AAEtB,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAK/B;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Input/utils/morpheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"morpheme.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/utils/morpheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,iBAAS,QAAQ,CACf,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,EACrC,QAAQ,EAAE,MAAM,EAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,2CAW1B;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/src/components/IconButton/styles.css

@@ -1,318 +0,0 @@
-/* BASE */
-
-.arkyn_icon_button {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkyn_icon_button:hover {
-  cursor: pointer;
-}
-
-.arkyn_icon_button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkyn_icon_button .content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* VARIANTS */
-.arkyn_icon_button.solid {
-  color: #fff;
-}
-
-.arkyn_icon_button.solid:disabled {
-  opacity: 0.4;
-}
-
-.arkyn_icon_button.solid.primary {
-  background-color: var(--primary-500);
-}
-
-.arkyn_icon_button.solid.primary:hover {
-  background-color: var(--primary-400);
-}
-
-.arkyn_icon_button.solid.primary:disabled {
-  background-color: var(--primary-400);
-}
-
-.arkyn_icon_button.solid.danger {
-  background-color: var(--danger-600);
-}
-
-.arkyn_icon_button.solid.danger:hover {
-  background-color: var(--danger-500);
-}
-
-.arkyn_icon_button.solid.danger:disabled {
-  background-color: var(--danger-500);
-}
-
-.arkyn_icon_button.solid.success {
-  background-color: var(--success-500);
-}
-
-.arkyn_icon_button.solid.success:hover {
-  background-color: var(--success-400);
-}
-
-.arkyn_icon_button.solid.success:disabled {
-  background-color: var(--success-400);
-}
-
-.arkyn_icon_button.solid.warning {
-  background-color: var(--warning-600);
-}
-
-.arkyn_icon_button.solid.warning:hover {
-  background-color: var(--warning-500);
-}
-
-.arkyn_icon_button.solid.warning:disabled {
-  background-color: var(--warning-500);
-}
-
-.arkyn_icon_button.outline {
-  border-color: var(--secondary-300);
-}
-
-.arkyn_icon_button.outline:hover {
-  border-color: var(--secondary-200);
-}
-
-.arkyn_icon_button.outline:disabled {
-  border-color: var(--secondary-200);
-}
-
-.arkyn_icon_button.outline.primary {
-  color: var(--primary-500);
-}
-
-.arkyn_icon_button.outline.primary:hover {
-  color: var(--primary-400);
-}
-
-.arkyn_icon_button.outline.primary:disabled {
-  color: var(--primary-400);
-}
-
-.arkyn_icon_button.outline.danger {
-  color: var(--danger-600);
-}
-
-.arkyn_icon_button.outline.danger:hover {
-  color: var(--danger-500);
-}
-
-.arkyn_icon_button.outline.danger:disabled {
-  color: var(--danger-500);
-}
-
-.arkyn_icon_button.outline.success {
-  color: var(--success-500);
-}
-
-.arkyn_icon_button.outline.success:hover {
-  color: var(--success-400);
-}
-
-.arkyn_icon_button.outline.success:disabled {
-  color: var(--success-400);
-}
-
-.arkyn_icon_button.outline.warning {
-  color: var(--warning-600);
-}
-
-.arkyn_icon_button.outline.warning:hover {
-  color: var(--warning-500);
-}
-
-.arkyn_icon_button.outline.warning:disabled {
-  color: var(--warning-500);
-}
-
-.arkyn_icon_button.ghost:disabled {
-  opacity: 0.4;
-}
-
-.arkyn_icon_button.ghost.primary {
-  color: var(--primary-500);
-  background-color: var(--primary-100);
-}
-
-.arkyn_icon_button.ghost.primary:hover {
-  color: var(--primary-400);
-  background-color: var(--primary-50);
-}
-
-.arkyn_icon_button.ghost.primary:disabled {
-  color: var(--primary-400);
-  background-color: var(--primary-50);
-}
-
-.arkyn_icon_button.ghost.danger {
-  color: var(--danger-600);
-  background-color: var(--danger-100);
-}
-
-.arkyn_icon_button.ghost.danger:hover {
-  color: var(--danger-500);
-  background-color: var(--danger-50);
-}
-
-.arkyn_icon_button.ghost.danger:disabled {
-  color: var(--danger-500);
-  background-color: var(--danger-50);
-}
-
-.arkyn_icon_button.ghost.success {
-  color: var(--success-500);
-  background-color: var(--success-100);
-}
-
-.arkyn_icon_button.ghost.success:hover {
-  color: var(--success-400);
-  background-color: var(--success-50);
-}
-
-.arkyn_icon_button.ghost.success:disabled {
-  color: var(--success-400);
-  background-color: var(--success-50);
-}
-
-.arkyn_icon_button.ghost.warning {
-  color: var(--warning-600);
-  background-color: var(--warning-100);
-}
-
-.arkyn_icon_button.ghost.warning:hover {
-  color: var(--warning-500);
-  background-color: var(--warning-50);
-}
-
-.arkyn_icon_button.ghost.warning:disabled {
-  color: var(--warning-500);
-  background-color: var(--warning-50);
-}
-
-.arkyn_icon_button.invisible:disabled {
-  opacity: 0.4;
-}
-
-.arkyn_icon_button.invisible.primary {
-  color: var(--primary-500);
-}
-
-.arkyn_icon_button.invisible.primary:hover {
-  color: var(--primary-400);
-}
-
-.arkyn_icon_button.invisible.primary:disabled {
-  color: var(--primary-400);
-}
-
-.arkyn_icon_button.invisible.danger {
-  color: var(--danger-600);
-}
-
-.arkyn_icon_button.invisible.danger:hover {
-  color: var(--danger-500);
-}
-
-.arkyn_icon_button.invisible.danger:disabled {
-  color: var(--danger-500);
-}
-
-.arkyn_icon_button.invisible.success {
-  color: var(--success-500);
-}
-
-.arkyn_icon_button.invisible.success:hover {
-  color: var(--success-400);
-}
-
-.arkyn_icon_button.invisible.success:disabled {
-  color: var(--success-400);
-}
-
-.arkyn_icon_button.invisible.warning {
-  color: var(--warning-600);
-}
-
-.arkyn_icon_button.invisible.warning:hover {
-  color: var(--warning-500);
-}
-
-.arkyn_icon_button.invisible.warning:disabled {
-  color: var(--warning-500);
-}
-
-/* SIZE */
-
-.arkyn_icon_button.lg {
-  border-radius: 6px;
-  height: 44px;
-  width: 44px;
-}
-
-.arkyn_icon_button.md {
-  border-radius: 6px;
-  height: 40px;
-  width: 40px;
-}
-
-.arkyn_icon_button.sm {
-  border-radius: 6px;
-  height: 32px;
-  width: 32px;
-}
-
-.arkyn_icon_button.xs {
-  border-radius: 4px;
-  height: 24px;
-  width: 24px;
-}
-
-/* SPIN */
-
-.arkyn_icon_button .spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-
-.arkyn_icon_button .spinner svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkyn_icon_button.loading_true .content {
-  opacity: 0;
-}
-
-.arkyn_icon_button.loading_true .spinner {
-  opacity: 1;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}