@tosui/react 0.1.3 → 0.1.5

package/dist/components/Box/inset/inset.module.css

@@ -1,187 +1,187 @@
 /* top */
-._top_1okb2_2 { top: var(--t-top); }
-._top\:h_1okb2_3:hover { top: var(--t-top-h); }
-._top\:f_1okb2_4:focus { top: var(--t-top-f); }
-._top\:a_1okb2_5:active { top: var(--t-top-a); }
-._top\:d_1okb2_6:disabled { top: var(--t-top-d); }
+._top_12hlx_2 { top: var(--t-top); }
+._top\:h_12hlx_3:hover { top: var(--t-top-h); }
+._top\:f_12hlx_4:focus { top: var(--t-top-f); }
+._top\:a_12hlx_5:active { top: var(--t-top-a); }
+._top\:d_12hlx_6:disabled { top: var(--t-top-d); }
 
 @media (min-width: 640px) {
-  ._top_sm_1okb2_9 { top: var(--t-top_sm); }
-  ._top_sm\:h_1okb2_10:hover { top: var(--t-top_sm-h); }
-  ._top_sm\:f_1okb2_11:focus { top: var(--t-top_sm-f); }
-  ._top_sm\:a_1okb2_12:active { top: var(--t-top_sm-a); }
-  ._top_sm\:d_1okb2_13:disabled { top: var(--t-top_sm-d); }
+  ._top_12hlx_2 { top: var(--t-top_sm, var(--t-top)); }
+  ._top\:h_12hlx_3:hover { top: var(--t-top_sm-h, var(--t-top-h)); }
+  ._top\:f_12hlx_4:focus { top: var(--t-top_sm-f, var(--t-top-f)); }
+  ._top\:a_12hlx_5:active { top: var(--t-top_sm-a, var(--t-top-a)); }
+  ._top\:d_12hlx_6:disabled { top: var(--t-top_sm-d, var(--t-top-d)); }
 }
 
 @media (min-width: 768px) {
-  ._top_md_1okb2_17 { top: var(--t-top_md); }
-  ._top_md\:h_1okb2_18:hover { top: var(--t-top_md-h); }
-  ._top_md\:f_1okb2_19:focus { top: var(--t-top_md-f); }
-  ._top_md\:a_1okb2_20:active { top: var(--t-top_md-a); }
-  ._top_md\:d_1okb2_21:disabled { top: var(--t-top_md-d); }
+  ._top_12hlx_2 { top: var(--t-top_md, var(--t-top_sm, var(--t-top))); }
+  ._top\:h_12hlx_3:hover { top: var(--t-top_md-h, var(--t-top_sm-h, var(--t-top-h))); }
+  ._top\:f_12hlx_4:focus { top: var(--t-top_md-f, var(--t-top_sm-f, var(--t-top-f))); }
+  ._top\:a_12hlx_5:active { top: var(--t-top_md-a, var(--t-top_sm-a, var(--t-top-a))); }
+  ._top\:d_12hlx_6:disabled { top: var(--t-top_md-d, var(--t-top_sm-d, var(--t-top-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._top_lg_1okb2_25 { top: var(--t-top_lg); }
-  ._top_lg\:h_1okb2_26:hover { top: var(--t-top_lg-h); }
-  ._top_lg\:f_1okb2_27:focus { top: var(--t-top_lg-f); }
-  ._top_lg\:a_1okb2_28:active { top: var(--t-top_lg-a); }
-  ._top_lg\:d_1okb2_29:disabled { top: var(--t-top_lg-d); }
+  ._top_12hlx_2 { top: var(--t-top_lg, var(--t-top_md, var(--t-top_sm, var(--t-top)))); }
+  ._top\:h_12hlx_3:hover { top: var(--t-top_lg-h, var(--t-top_md-h, var(--t-top_sm-h, var(--t-top-h)))); }
+  ._top\:f_12hlx_4:focus { top: var(--t-top_lg-f, var(--t-top_md-f, var(--t-top_sm-f, var(--t-top-f)))); }
+  ._top\:a_12hlx_5:active { top: var(--t-top_lg-a, var(--t-top_md-a, var(--t-top_sm-a, var(--t-top-a)))); }
+  ._top\:d_12hlx_6:disabled { top: var(--t-top_lg-d, var(--t-top_md-d, var(--t-top_sm-d, var(--t-top-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._top_xl_1okb2_33 { top: var(--t-top_xl); }
-  ._top_xl\:h_1okb2_34:hover { top: var(--t-top_xl-h); }
-  ._top_xl\:f_1okb2_35:focus { top: var(--t-top_xl-f); }
-  ._top_xl\:a_1okb2_36:active { top: var(--t-top_xl-a); }
-  ._top_xl\:d_1okb2_37:disabled { top: var(--t-top_xl-d); }
+  ._top_12hlx_2 { top: var(--t-top_xl, var(--t-top_lg, var(--t-top_md, var(--t-top_sm, var(--t-top))))); }
+  ._top\:h_12hlx_3:hover { top: var(--t-top_xl-h, var(--t-top_lg-h, var(--t-top_md-h, var(--t-top_sm-h, var(--t-top-h))))); }
+  ._top\:f_12hlx_4:focus { top: var(--t-top_xl-f, var(--t-top_lg-f, var(--t-top_md-f, var(--t-top_sm-f, var(--t-top-f))))); }
+  ._top\:a_12hlx_5:active { top: var(--t-top_xl-a, var(--t-top_lg-a, var(--t-top_md-a, var(--t-top_sm-a, var(--t-top-a))))); }
+  ._top\:d_12hlx_6:disabled { top: var(--t-top_xl-d, var(--t-top_lg-d, var(--t-top_md-d, var(--t-top_sm-d, var(--t-top-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._top_2xl_1okb2_41 { top: var(--t-top_2xl); }
-  ._top_2xl\:h_1okb2_42:hover { top: var(--t-top_2xl-h); }
-  ._top_2xl\:f_1okb2_43:focus { top: var(--t-top_2xl-f); }
-  ._top_2xl\:a_1okb2_44:active { top: var(--t-top_2xl-a); }
-  ._top_2xl\:d_1okb2_45:disabled { top: var(--t-top_2xl-d); }
+  ._top_12hlx_2 { top: var(--t-top_2xl, var(--t-top_xl, var(--t-top_lg, var(--t-top_md, var(--t-top_sm, var(--t-top)))))); }
+  ._top\:h_12hlx_3:hover { top: var(--t-top_2xl-h, var(--t-top_xl-h, var(--t-top_lg-h, var(--t-top_md-h, var(--t-top_sm-h, var(--t-top-h)))))); }
+  ._top\:f_12hlx_4:focus { top: var(--t-top_2xl-f, var(--t-top_xl-f, var(--t-top_lg-f, var(--t-top_md-f, var(--t-top_sm-f, var(--t-top-f)))))); }
+  ._top\:a_12hlx_5:active { top: var(--t-top_2xl-a, var(--t-top_xl-a, var(--t-top_lg-a, var(--t-top_md-a, var(--t-top_sm-a, var(--t-top-a)))))); }
+  ._top\:d_12hlx_6:disabled { top: var(--t-top_2xl-d, var(--t-top_xl-d, var(--t-top_lg-d, var(--t-top_md-d, var(--t-top_sm-d, var(--t-top-d)))))); }
 }
 
 /* right */
-._right_1okb2_49 { right: var(--t-right); }
-._right\:h_1okb2_50:hover { right: var(--t-right-h); }
-._right\:f_1okb2_51:focus { right: var(--t-right-f); }
-._right\:a_1okb2_52:active { right: var(--t-right-a); }
-._right\:d_1okb2_53:disabled { right: var(--t-right-d); }
+._right_12hlx_49 { right: var(--t-right); }
+._right\:h_12hlx_50:hover { right: var(--t-right-h); }
+._right\:f_12hlx_51:focus { right: var(--t-right-f); }
+._right\:a_12hlx_52:active { right: var(--t-right-a); }
+._right\:d_12hlx_53:disabled { right: var(--t-right-d); }
 
 @media (min-width: 640px) {
-  ._right_sm_1okb2_56 { right: var(--t-right_sm); }
-  ._right_sm\:h_1okb2_57:hover { right: var(--t-right_sm-h); }
-  ._right_sm\:f_1okb2_58:focus { right: var(--t-right_sm-f); }
-  ._right_sm\:a_1okb2_59:active { right: var(--t-right_sm-a); }
-  ._right_sm\:d_1okb2_60:disabled { right: var(--t-right_sm-d); }
+  ._right_12hlx_49 { right: var(--t-right_sm, var(--t-right)); }
+  ._right\:h_12hlx_50:hover { right: var(--t-right_sm-h, var(--t-right-h)); }
+  ._right\:f_12hlx_51:focus { right: var(--t-right_sm-f, var(--t-right-f)); }
+  ._right\:a_12hlx_52:active { right: var(--t-right_sm-a, var(--t-right-a)); }
+  ._right\:d_12hlx_53:disabled { right: var(--t-right_sm-d, var(--t-right-d)); }
 }
 
 @media (min-width: 768px) {
-  ._right_md_1okb2_64 { right: var(--t-right_md); }
-  ._right_md\:h_1okb2_65:hover { right: var(--t-right_md-h); }
-  ._right_md\:f_1okb2_66:focus { right: var(--t-right_md-f); }
-  ._right_md\:a_1okb2_67:active { right: var(--t-right_md-a); }
-  ._right_md\:d_1okb2_68:disabled { right: var(--t-right_md-d); }
+  ._right_12hlx_49 { right: var(--t-right_md, var(--t-right_sm, var(--t-right))); }
+  ._right\:h_12hlx_50:hover { right: var(--t-right_md-h, var(--t-right_sm-h, var(--t-right-h))); }
+  ._right\:f_12hlx_51:focus { right: var(--t-right_md-f, var(--t-right_sm-f, var(--t-right-f))); }
+  ._right\:a_12hlx_52:active { right: var(--t-right_md-a, var(--t-right_sm-a, var(--t-right-a))); }
+  ._right\:d_12hlx_53:disabled { right: var(--t-right_md-d, var(--t-right_sm-d, var(--t-right-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._right_lg_1okb2_72 { right: var(--t-right_lg); }
-  ._right_lg\:h_1okb2_73:hover { right: var(--t-right_lg-h); }
-  ._right_lg\:f_1okb2_74:focus { right: var(--t-right_lg-f); }
-  ._right_lg\:a_1okb2_75:active { right: var(--t-right_lg-a); }
-  ._right_lg\:d_1okb2_76:disabled { right: var(--t-right_lg-d); }
+  ._right_12hlx_49 { right: var(--t-right_lg, var(--t-right_md, var(--t-right_sm, var(--t-right)))); }
+  ._right\:h_12hlx_50:hover { right: var(--t-right_lg-h, var(--t-right_md-h, var(--t-right_sm-h, var(--t-right-h)))); }
+  ._right\:f_12hlx_51:focus { right: var(--t-right_lg-f, var(--t-right_md-f, var(--t-right_sm-f, var(--t-right-f)))); }
+  ._right\:a_12hlx_52:active { right: var(--t-right_lg-a, var(--t-right_md-a, var(--t-right_sm-a, var(--t-right-a)))); }
+  ._right\:d_12hlx_53:disabled { right: var(--t-right_lg-d, var(--t-right_md-d, var(--t-right_sm-d, var(--t-right-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._right_xl_1okb2_80 { right: var(--t-right_xl); }
-  ._right_xl\:h_1okb2_81:hover { right: var(--t-right_xl-h); }
-  ._right_xl\:f_1okb2_82:focus { right: var(--t-right_xl-f); }
-  ._right_xl\:a_1okb2_83:active { right: var(--t-right_xl-a); }
-  ._right_xl\:d_1okb2_84:disabled { right: var(--t-right_xl-d); }
+  ._right_12hlx_49 { right: var(--t-right_xl, var(--t-right_lg, var(--t-right_md, var(--t-right_sm, var(--t-right))))); }
+  ._right\:h_12hlx_50:hover { right: var(--t-right_xl-h, var(--t-right_lg-h, var(--t-right_md-h, var(--t-right_sm-h, var(--t-right-h))))); }
+  ._right\:f_12hlx_51:focus { right: var(--t-right_xl-f, var(--t-right_lg-f, var(--t-right_md-f, var(--t-right_sm-f, var(--t-right-f))))); }
+  ._right\:a_12hlx_52:active { right: var(--t-right_xl-a, var(--t-right_lg-a, var(--t-right_md-a, var(--t-right_sm-a, var(--t-right-a))))); }
+  ._right\:d_12hlx_53:disabled { right: var(--t-right_xl-d, var(--t-right_lg-d, var(--t-right_md-d, var(--t-right_sm-d, var(--t-right-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._right_2xl_1okb2_88 { right: var(--t-right_2xl); }
-  ._right_2xl\:h_1okb2_89:hover { right: var(--t-right_2xl-h); }
-  ._right_2xl\:f_1okb2_90:focus { right: var(--t-right_2xl-f); }
-  ._right_2xl\:a_1okb2_91:active { right: var(--t-right_2xl-a); }
-  ._right_2xl\:d_1okb2_92:disabled { right: var(--t-right_2xl-d); }
+  ._right_12hlx_49 { right: var(--t-right_2xl, var(--t-right_xl, var(--t-right_lg, var(--t-right_md, var(--t-right_sm, var(--t-right)))))); }
+  ._right\:h_12hlx_50:hover { right: var(--t-right_2xl-h, var(--t-right_xl-h, var(--t-right_lg-h, var(--t-right_md-h, var(--t-right_sm-h, var(--t-right-h)))))); }
+  ._right\:f_12hlx_51:focus { right: var(--t-right_2xl-f, var(--t-right_xl-f, var(--t-right_lg-f, var(--t-right_md-f, var(--t-right_sm-f, var(--t-right-f)))))); }
+  ._right\:a_12hlx_52:active { right: var(--t-right_2xl-a, var(--t-right_xl-a, var(--t-right_lg-a, var(--t-right_md-a, var(--t-right_sm-a, var(--t-right-a)))))); }
+  ._right\:d_12hlx_53:disabled { right: var(--t-right_2xl-d, var(--t-right_xl-d, var(--t-right_lg-d, var(--t-right_md-d, var(--t-right_sm-d, var(--t-right-d)))))); }
 }
 
 /* bottom */
-._bottom_1okb2_96 { bottom: var(--t-bottom); }
-._bottom\:h_1okb2_97:hover { bottom: var(--t-bottom-h); }
-._bottom\:f_1okb2_98:focus { bottom: var(--t-bottom-f); }
-._bottom\:a_1okb2_99:active { bottom: var(--t-bottom-a); }
-._bottom\:d_1okb2_100:disabled { bottom: var(--t-bottom-d); }
+._bottom_12hlx_96 { bottom: var(--t-bottom); }
+._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom-h); }
+._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom-f); }
+._bottom\:a_12hlx_99:active { bottom: var(--t-bottom-a); }
+._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom-d); }
 
 @media (min-width: 640px) {
-  ._bottom_sm_1okb2_103 { bottom: var(--t-bottom_sm); }
-  ._bottom_sm\:h_1okb2_104:hover { bottom: var(--t-bottom_sm-h); }
-  ._bottom_sm\:f_1okb2_105:focus { bottom: var(--t-bottom_sm-f); }
-  ._bottom_sm\:a_1okb2_106:active { bottom: var(--t-bottom_sm-a); }
-  ._bottom_sm\:d_1okb2_107:disabled { bottom: var(--t-bottom_sm-d); }
+  ._bottom_12hlx_96 { bottom: var(--t-bottom_sm, var(--t-bottom)); }
+  ._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom_sm-h, var(--t-bottom-h)); }
+  ._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom_sm-f, var(--t-bottom-f)); }
+  ._bottom\:a_12hlx_99:active { bottom: var(--t-bottom_sm-a, var(--t-bottom-a)); }
+  ._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom_sm-d, var(--t-bottom-d)); }
 }
 
 @media (min-width: 768px) {
-  ._bottom_md_1okb2_111 { bottom: var(--t-bottom_md); }
-  ._bottom_md\:h_1okb2_112:hover { bottom: var(--t-bottom_md-h); }
-  ._bottom_md\:f_1okb2_113:focus { bottom: var(--t-bottom_md-f); }
-  ._bottom_md\:a_1okb2_114:active { bottom: var(--t-bottom_md-a); }
-  ._bottom_md\:d_1okb2_115:disabled { bottom: var(--t-bottom_md-d); }
+  ._bottom_12hlx_96 { bottom: var(--t-bottom_md, var(--t-bottom_sm, var(--t-bottom))); }
+  ._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom_md-h, var(--t-bottom_sm-h, var(--t-bottom-h))); }
+  ._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom_md-f, var(--t-bottom_sm-f, var(--t-bottom-f))); }
+  ._bottom\:a_12hlx_99:active { bottom: var(--t-bottom_md-a, var(--t-bottom_sm-a, var(--t-bottom-a))); }
+  ._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom_md-d, var(--t-bottom_sm-d, var(--t-bottom-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._bottom_lg_1okb2_119 { bottom: var(--t-bottom_lg); }
-  ._bottom_lg\:h_1okb2_120:hover { bottom: var(--t-bottom_lg-h); }
-  ._bottom_lg\:f_1okb2_121:focus { bottom: var(--t-bottom_lg-f); }
-  ._bottom_lg\:a_1okb2_122:active { bottom: var(--t-bottom_lg-a); }
-  ._bottom_lg\:d_1okb2_123:disabled { bottom: var(--t-bottom_lg-d); }
+  ._bottom_12hlx_96 { bottom: var(--t-bottom_lg, var(--t-bottom_md, var(--t-bottom_sm, var(--t-bottom)))); }
+  ._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom_lg-h, var(--t-bottom_md-h, var(--t-bottom_sm-h, var(--t-bottom-h)))); }
+  ._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom_lg-f, var(--t-bottom_md-f, var(--t-bottom_sm-f, var(--t-bottom-f)))); }
+  ._bottom\:a_12hlx_99:active { bottom: var(--t-bottom_lg-a, var(--t-bottom_md-a, var(--t-bottom_sm-a, var(--t-bottom-a)))); }
+  ._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom_lg-d, var(--t-bottom_md-d, var(--t-bottom_sm-d, var(--t-bottom-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._bottom_xl_1okb2_127 { bottom: var(--t-bottom_xl); }
-  ._bottom_xl\:h_1okb2_128:hover { bottom: var(--t-bottom_xl-h); }
-  ._bottom_xl\:f_1okb2_129:focus { bottom: var(--t-bottom_xl-f); }
-  ._bottom_xl\:a_1okb2_130:active { bottom: var(--t-bottom_xl-a); }
-  ._bottom_xl\:d_1okb2_131:disabled { bottom: var(--t-bottom_xl-d); }
+  ._bottom_12hlx_96 { bottom: var(--t-bottom_xl, var(--t-bottom_lg, var(--t-bottom_md, var(--t-bottom_sm, var(--t-bottom))))); }
+  ._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom_xl-h, var(--t-bottom_lg-h, var(--t-bottom_md-h, var(--t-bottom_sm-h, var(--t-bottom-h))))); }
+  ._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom_xl-f, var(--t-bottom_lg-f, var(--t-bottom_md-f, var(--t-bottom_sm-f, var(--t-bottom-f))))); }
+  ._bottom\:a_12hlx_99:active { bottom: var(--t-bottom_xl-a, var(--t-bottom_lg-a, var(--t-bottom_md-a, var(--t-bottom_sm-a, var(--t-bottom-a))))); }
+  ._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom_xl-d, var(--t-bottom_lg-d, var(--t-bottom_md-d, var(--t-bottom_sm-d, var(--t-bottom-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._bottom_2xl_1okb2_135 { bottom: var(--t-bottom_2xl); }
-  ._bottom_2xl\:h_1okb2_136:hover { bottom: var(--t-bottom_2xl-h); }
-  ._bottom_2xl\:f_1okb2_137:focus { bottom: var(--t-bottom_2xl-f); }
-  ._bottom_2xl\:a_1okb2_138:active { bottom: var(--t-bottom_2xl-a); }
-  ._bottom_2xl\:d_1okb2_139:disabled { bottom: var(--t-bottom_2xl-d); }
+  ._bottom_12hlx_96 { bottom: var(--t-bottom_2xl, var(--t-bottom_xl, var(--t-bottom_lg, var(--t-bottom_md, var(--t-bottom_sm, var(--t-bottom)))))); }
+  ._bottom\:h_12hlx_97:hover { bottom: var(--t-bottom_2xl-h, var(--t-bottom_xl-h, var(--t-bottom_lg-h, var(--t-bottom_md-h, var(--t-bottom_sm-h, var(--t-bottom-h)))))); }
+  ._bottom\:f_12hlx_98:focus { bottom: var(--t-bottom_2xl-f, var(--t-bottom_xl-f, var(--t-bottom_lg-f, var(--t-bottom_md-f, var(--t-bottom_sm-f, var(--t-bottom-f)))))); }
+  ._bottom\:a_12hlx_99:active { bottom: var(--t-bottom_2xl-a, var(--t-bottom_xl-a, var(--t-bottom_lg-a, var(--t-bottom_md-a, var(--t-bottom_sm-a, var(--t-bottom-a)))))); }
+  ._bottom\:d_12hlx_100:disabled { bottom: var(--t-bottom_2xl-d, var(--t-bottom_xl-d, var(--t-bottom_lg-d, var(--t-bottom_md-d, var(--t-bottom_sm-d, var(--t-bottom-d)))))); }
 }
 
 /* left */
-._left_1okb2_143 { left: var(--t-left); }
-._left\:h_1okb2_144:hover { left: var(--t-left-h); }
-._left\:f_1okb2_145:focus { left: var(--t-left-f); }
-._left\:a_1okb2_146:active { left: var(--t-left-a); }
-._left\:d_1okb2_147:disabled { left: var(--t-left-d); }
+._left_12hlx_143 { left: var(--t-left); }
+._left\:h_12hlx_144:hover { left: var(--t-left-h); }
+._left\:f_12hlx_145:focus { left: var(--t-left-f); }
+._left\:a_12hlx_146:active { left: var(--t-left-a); }
+._left\:d_12hlx_147:disabled { left: var(--t-left-d); }
 
 @media (min-width: 640px) {
-  ._left_sm_1okb2_150 { left: var(--t-left_sm); }
-  ._left_sm\:h_1okb2_151:hover { left: var(--t-left_sm-h); }
-  ._left_sm\:f_1okb2_152:focus { left: var(--t-left_sm-f); }
-  ._left_sm\:a_1okb2_153:active { left: var(--t-left_sm-a); }
-  ._left_sm\:d_1okb2_154:disabled { left: var(--t-left_sm-d); }
+  ._left_12hlx_143 { left: var(--t-left_sm, var(--t-left)); }
+  ._left\:h_12hlx_144:hover { left: var(--t-left_sm-h, var(--t-left-h)); }
+  ._left\:f_12hlx_145:focus { left: var(--t-left_sm-f, var(--t-left-f)); }
+  ._left\:a_12hlx_146:active { left: var(--t-left_sm-a, var(--t-left-a)); }
+  ._left\:d_12hlx_147:disabled { left: var(--t-left_sm-d, var(--t-left-d)); }
 }
 
 @media (min-width: 768px) {
-  ._left_md_1okb2_158 { left: var(--t-left_md); }
-  ._left_md\:h_1okb2_159:hover { left: var(--t-left_md-h); }
-  ._left_md\:f_1okb2_160:focus { left: var(--t-left_md-f); }
-  ._left_md\:a_1okb2_161:active { left: var(--t-left_md-a); }
-  ._left_md\:d_1okb2_162:disabled { left: var(--t-left_md-d); }
+  ._left_12hlx_143 { left: var(--t-left_md, var(--t-left_sm, var(--t-left))); }
+  ._left\:h_12hlx_144:hover { left: var(--t-left_md-h, var(--t-left_sm-h, var(--t-left-h))); }
+  ._left\:f_12hlx_145:focus { left: var(--t-left_md-f, var(--t-left_sm-f, var(--t-left-f))); }
+  ._left\:a_12hlx_146:active { left: var(--t-left_md-a, var(--t-left_sm-a, var(--t-left-a))); }
+  ._left\:d_12hlx_147:disabled { left: var(--t-left_md-d, var(--t-left_sm-d, var(--t-left-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._left_lg_1okb2_166 { left: var(--t-left_lg); }
-  ._left_lg\:h_1okb2_167:hover { left: var(--t-left_lg-h); }
-  ._left_lg\:f_1okb2_168:focus { left: var(--t-left_lg-f); }
-  ._left_lg\:a_1okb2_169:active { left: var(--t-left_lg-a); }
-  ._left_lg\:d_1okb2_170:disabled { left: var(--t-left_lg-d); }
+  ._left_12hlx_143 { left: var(--t-left_lg, var(--t-left_md, var(--t-left_sm, var(--t-left)))); }
+  ._left\:h_12hlx_144:hover { left: var(--t-left_lg-h, var(--t-left_md-h, var(--t-left_sm-h, var(--t-left-h)))); }
+  ._left\:f_12hlx_145:focus { left: var(--t-left_lg-f, var(--t-left_md-f, var(--t-left_sm-f, var(--t-left-f)))); }
+  ._left\:a_12hlx_146:active { left: var(--t-left_lg-a, var(--t-left_md-a, var(--t-left_sm-a, var(--t-left-a)))); }
+  ._left\:d_12hlx_147:disabled { left: var(--t-left_lg-d, var(--t-left_md-d, var(--t-left_sm-d, var(--t-left-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._left_xl_1okb2_174 { left: var(--t-left_xl); }
-  ._left_xl\:h_1okb2_175:hover { left: var(--t-left_xl-h); }
-  ._left_xl\:f_1okb2_176:focus { left: var(--t-left_xl-f); }
-  ._left_xl\:a_1okb2_177:active { left: var(--t-left_xl-a); }
-  ._left_xl\:d_1okb2_178:disabled { left: var(--t-left_xl-d); }
+  ._left_12hlx_143 { left: var(--t-left_xl, var(--t-left_lg, var(--t-left_md, var(--t-left_sm, var(--t-left))))); }
+  ._left\:h_12hlx_144:hover { left: var(--t-left_xl-h, var(--t-left_lg-h, var(--t-left_md-h, var(--t-left_sm-h, var(--t-left-h))))); }
+  ._left\:f_12hlx_145:focus { left: var(--t-left_xl-f, var(--t-left_lg-f, var(--t-left_md-f, var(--t-left_sm-f, var(--t-left-f))))); }
+  ._left\:a_12hlx_146:active { left: var(--t-left_xl-a, var(--t-left_lg-a, var(--t-left_md-a, var(--t-left_sm-a, var(--t-left-a))))); }
+  ._left\:d_12hlx_147:disabled { left: var(--t-left_xl-d, var(--t-left_lg-d, var(--t-left_md-d, var(--t-left_sm-d, var(--t-left-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._left_2xl_1okb2_182 { left: var(--t-left_2xl); }
-  ._left_2xl\:h_1okb2_183:hover { left: var(--t-left_2xl-h); }
-  ._left_2xl\:f_1okb2_184:focus { left: var(--t-left_2xl-f); }
-  ._left_2xl\:a_1okb2_185:active { left: var(--t-left_2xl-a); }
-  ._left_2xl\:d_1okb2_186:disabled { left: var(--t-left_2xl-d); }
+  ._left_12hlx_143 { left: var(--t-left_2xl, var(--t-left_xl, var(--t-left_lg, var(--t-left_md, var(--t-left_sm, var(--t-left)))))); }
+  ._left\:h_12hlx_144:hover { left: var(--t-left_2xl-h, var(--t-left_xl-h, var(--t-left_lg-h, var(--t-left_md-h, var(--t-left_sm-h, var(--t-left-h)))))); }
+  ._left\:f_12hlx_145:focus { left: var(--t-left_2xl-f, var(--t-left_xl-f, var(--t-left_lg-f, var(--t-left_md-f, var(--t-left_sm-f, var(--t-left-f)))))); }
+  ._left\:a_12hlx_146:active { left: var(--t-left_2xl-a, var(--t-left_xl-a, var(--t-left_lg-a, var(--t-left_md-a, var(--t-left_sm-a, var(--t-left-a)))))); }
+  ._left\:d_12hlx_147:disabled { left: var(--t-left_2xl-d, var(--t-left_xl-d, var(--t-left_lg-d, var(--t-left_md-d, var(--t-left_sm-d, var(--t-left-d)))))); }
 }

package/dist/components/Box/inset/inset.module.css.js

@@ -1,174 +1,34 @@
-const top = "_top_1okb2_2";
-const top_sm = "_top_sm_1okb2_9";
-const top_md = "_top_md_1okb2_17";
-const top_lg = "_top_lg_1okb2_25";
-const top_xl = "_top_xl_1okb2_33";
-const top_2xl = "_top_2xl_1okb2_41";
-const right = "_right_1okb2_49";
-const right_sm = "_right_sm_1okb2_56";
-const right_md = "_right_md_1okb2_64";
-const right_lg = "_right_lg_1okb2_72";
-const right_xl = "_right_xl_1okb2_80";
-const right_2xl = "_right_2xl_1okb2_88";
-const bottom = "_bottom_1okb2_96";
-const bottom_sm = "_bottom_sm_1okb2_103";
-const bottom_md = "_bottom_md_1okb2_111";
-const bottom_lg = "_bottom_lg_1okb2_119";
-const bottom_xl = "_bottom_xl_1okb2_127";
-const bottom_2xl = "_bottom_2xl_1okb2_135";
-const left = "_left_1okb2_143";
-const left_sm = "_left_sm_1okb2_150";
-const left_md = "_left_md_1okb2_158";
-const left_lg = "_left_lg_1okb2_166";
-const left_xl = "_left_xl_1okb2_174";
-const left_2xl = "_left_2xl_1okb2_182";
+const top = "_top_12hlx_2";
+const right = "_right_12hlx_49";
+const bottom = "_bottom_12hlx_96";
+const left = "_left_12hlx_143";
 const styles = {
   top,
-  "top:h": "_top:h_1okb2_3",
-  "top:f": "_top:f_1okb2_4",
-  "top:a": "_top:a_1okb2_5",
-  "top:d": "_top:d_1okb2_6",
-  top_sm,
-  "top_sm:h": "_top_sm:h_1okb2_10",
-  "top_sm:f": "_top_sm:f_1okb2_11",
-  "top_sm:a": "_top_sm:a_1okb2_12",
-  "top_sm:d": "_top_sm:d_1okb2_13",
-  top_md,
-  "top_md:h": "_top_md:h_1okb2_18",
-  "top_md:f": "_top_md:f_1okb2_19",
-  "top_md:a": "_top_md:a_1okb2_20",
-  "top_md:d": "_top_md:d_1okb2_21",
-  top_lg,
-  "top_lg:h": "_top_lg:h_1okb2_26",
-  "top_lg:f": "_top_lg:f_1okb2_27",
-  "top_lg:a": "_top_lg:a_1okb2_28",
-  "top_lg:d": "_top_lg:d_1okb2_29",
-  top_xl,
-  "top_xl:h": "_top_xl:h_1okb2_34",
-  "top_xl:f": "_top_xl:f_1okb2_35",
-  "top_xl:a": "_top_xl:a_1okb2_36",
-  "top_xl:d": "_top_xl:d_1okb2_37",
-  top_2xl,
-  "top_2xl:h": "_top_2xl:h_1okb2_42",
-  "top_2xl:f": "_top_2xl:f_1okb2_43",
-  "top_2xl:a": "_top_2xl:a_1okb2_44",
-  "top_2xl:d": "_top_2xl:d_1okb2_45",
+  "top:h": "_top:h_12hlx_3",
+  "top:f": "_top:f_12hlx_4",
+  "top:a": "_top:a_12hlx_5",
+  "top:d": "_top:d_12hlx_6",
   right,
-  "right:h": "_right:h_1okb2_50",
-  "right:f": "_right:f_1okb2_51",
-  "right:a": "_right:a_1okb2_52",
-  "right:d": "_right:d_1okb2_53",
-  right_sm,
-  "right_sm:h": "_right_sm:h_1okb2_57",
-  "right_sm:f": "_right_sm:f_1okb2_58",
-  "right_sm:a": "_right_sm:a_1okb2_59",
-  "right_sm:d": "_right_sm:d_1okb2_60",
-  right_md,
-  "right_md:h": "_right_md:h_1okb2_65",
-  "right_md:f": "_right_md:f_1okb2_66",
-  "right_md:a": "_right_md:a_1okb2_67",
-  "right_md:d": "_right_md:d_1okb2_68",
-  right_lg,
-  "right_lg:h": "_right_lg:h_1okb2_73",
-  "right_lg:f": "_right_lg:f_1okb2_74",
-  "right_lg:a": "_right_lg:a_1okb2_75",
-  "right_lg:d": "_right_lg:d_1okb2_76",
-  right_xl,
-  "right_xl:h": "_right_xl:h_1okb2_81",
-  "right_xl:f": "_right_xl:f_1okb2_82",
-  "right_xl:a": "_right_xl:a_1okb2_83",
-  "right_xl:d": "_right_xl:d_1okb2_84",
-  right_2xl,
-  "right_2xl:h": "_right_2xl:h_1okb2_89",
-  "right_2xl:f": "_right_2xl:f_1okb2_90",
-  "right_2xl:a": "_right_2xl:a_1okb2_91",
-  "right_2xl:d": "_right_2xl:d_1okb2_92",
+  "right:h": "_right:h_12hlx_50",
+  "right:f": "_right:f_12hlx_51",
+  "right:a": "_right:a_12hlx_52",
+  "right:d": "_right:d_12hlx_53",
   bottom,
-  "bottom:h": "_bottom:h_1okb2_97",
-  "bottom:f": "_bottom:f_1okb2_98",
-  "bottom:a": "_bottom:a_1okb2_99",
-  "bottom:d": "_bottom:d_1okb2_100",
-  bottom_sm,
-  "bottom_sm:h": "_bottom_sm:h_1okb2_104",
-  "bottom_sm:f": "_bottom_sm:f_1okb2_105",
-  "bottom_sm:a": "_bottom_sm:a_1okb2_106",
-  "bottom_sm:d": "_bottom_sm:d_1okb2_107",
-  bottom_md,
-  "bottom_md:h": "_bottom_md:h_1okb2_112",
-  "bottom_md:f": "_bottom_md:f_1okb2_113",
-  "bottom_md:a": "_bottom_md:a_1okb2_114",
-  "bottom_md:d": "_bottom_md:d_1okb2_115",
-  bottom_lg,
-  "bottom_lg:h": "_bottom_lg:h_1okb2_120",
-  "bottom_lg:f": "_bottom_lg:f_1okb2_121",
-  "bottom_lg:a": "_bottom_lg:a_1okb2_122",
-  "bottom_lg:d": "_bottom_lg:d_1okb2_123",
-  bottom_xl,
-  "bottom_xl:h": "_bottom_xl:h_1okb2_128",
-  "bottom_xl:f": "_bottom_xl:f_1okb2_129",
-  "bottom_xl:a": "_bottom_xl:a_1okb2_130",
-  "bottom_xl:d": "_bottom_xl:d_1okb2_131",
-  bottom_2xl,
-  "bottom_2xl:h": "_bottom_2xl:h_1okb2_136",
-  "bottom_2xl:f": "_bottom_2xl:f_1okb2_137",
-  "bottom_2xl:a": "_bottom_2xl:a_1okb2_138",
-  "bottom_2xl:d": "_bottom_2xl:d_1okb2_139",
+  "bottom:h": "_bottom:h_12hlx_97",
+  "bottom:f": "_bottom:f_12hlx_98",
+  "bottom:a": "_bottom:a_12hlx_99",
+  "bottom:d": "_bottom:d_12hlx_100",
   left,
-  "left:h": "_left:h_1okb2_144",
-  "left:f": "_left:f_1okb2_145",
-  "left:a": "_left:a_1okb2_146",
-  "left:d": "_left:d_1okb2_147",
-  left_sm,
-  "left_sm:h": "_left_sm:h_1okb2_151",
-  "left_sm:f": "_left_sm:f_1okb2_152",
-  "left_sm:a": "_left_sm:a_1okb2_153",
-  "left_sm:d": "_left_sm:d_1okb2_154",
-  left_md,
-  "left_md:h": "_left_md:h_1okb2_159",
-  "left_md:f": "_left_md:f_1okb2_160",
-  "left_md:a": "_left_md:a_1okb2_161",
-  "left_md:d": "_left_md:d_1okb2_162",
-  left_lg,
-  "left_lg:h": "_left_lg:h_1okb2_167",
-  "left_lg:f": "_left_lg:f_1okb2_168",
-  "left_lg:a": "_left_lg:a_1okb2_169",
-  "left_lg:d": "_left_lg:d_1okb2_170",
-  left_xl,
-  "left_xl:h": "_left_xl:h_1okb2_175",
-  "left_xl:f": "_left_xl:f_1okb2_176",
-  "left_xl:a": "_left_xl:a_1okb2_177",
-  "left_xl:d": "_left_xl:d_1okb2_178",
-  left_2xl,
-  "left_2xl:h": "_left_2xl:h_1okb2_183",
-  "left_2xl:f": "_left_2xl:f_1okb2_184",
-  "left_2xl:a": "_left_2xl:a_1okb2_185",
-  "left_2xl:d": "_left_2xl:d_1okb2_186"
+  "left:h": "_left:h_12hlx_144",
+  "left:f": "_left:f_12hlx_145",
+  "left:a": "_left:a_12hlx_146",
+  "left:d": "_left:d_12hlx_147"
 };
 export {
   bottom,
-  bottom_2xl,
-  bottom_lg,
-  bottom_md,
-  bottom_sm,
-  bottom_xl,
   styles as default,
   left,
-  left_2xl,
-  left_lg,
-  left_md,
-  left_sm,
-  left_xl,
   right,
-  right_2xl,
-  right_lg,
-  right_md,
-  right_sm,
-  right_xl,
-  top,
-  top_2xl,
-  top_lg,
-  top_md,
-  top_sm,
-  top_xl
+  top
 };
 //# sourceMappingURL=inset.module.css.js.map

package/dist/components/Box/inset/inset.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"inset.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"inset.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Box/interactions/interactions.d.ts

@@ -1,14 +1,12 @@
-import { StyleResult } from '../shared';
+import { ResponsiveValue } from '../../../utils/breakpoints';
+import { StateProps, StyleResult } from '../shared';
 export type CursorValue = "auto" | "default" | "pointer" | "wait" | "text" | "move" | "not-allowed" | "grab" | "grabbing" | "zoom-in" | "zoom-out" | "crosshair";
 export type PointerEventsValue = "auto" | "none" | "all";
 export type UserSelectValue = "auto" | "none" | "text" | "all";
 export type InteractionProps = {
-    cursor?: CursorValue;
-    pointerEvents?: PointerEventsValue;
-    userSelect?: UserSelectValue;
+    cursor?: ResponsiveValue<CursorValue>;
+    pointerEvents?: ResponsiveValue<PointerEventsValue>;
+    userSelect?: ResponsiveValue<UserSelectValue>;
 };
-export type InteractionStateProps = {
-    _hover?: InteractionProps;
-};
-export declare function getInteractionStyles(props: InteractionProps & InteractionStateProps): StyleResult;
+export declare function getInteractionStyles(props: InteractionProps & StateProps<InteractionProps>): StyleResult;
 //# sourceMappingURL=interactions.d.ts.map

package/dist/components/Box/interactions/interactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/interactions/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,aAAa,GACb,MAAM,GACN,UAAU,GACV,SAAS,GACT,UAAU,GACV,WAAW,CAAC;AAEhB,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAiDF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,gBAAgB,GAAG,qBAAqB,GAC9C,WAAW,CAUb"}
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/interactions/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,aAAa,GACb,MAAM,GACN,UAAU,GACV,SAAS,GACT,UAAU,GACV,WAAW,CAAC;AAEhB,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CAC/C,CAAC;AAkBF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,GACrD,WAAW,CAmBb"}

package/dist/components/Box/interactions/interactions.js

@@ -1,41 +1,31 @@
-import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./interactions.module.css.js";
 import clsx from "clsx";
-function getCursorClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`cursor-${value}${stateClassSuffix}`] : styles[`cursor-${value}`];
-}
-function getPointerEventsClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`pointer-${value}${stateClassSuffix}`] : styles[`pointer-${value}`];
-}
-function getUserSelectClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`select-${value}${stateClassSuffix}`] : styles[`select-${value}`];
-}
 function getInteractionStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
-  const classes = [];
-  if (props.cursor) {
-    const cls = getCursorClass(props.cursor, state);
-    if (cls) classes.push(cls);
-  }
-  if (props.pointerEvents) {
-    const cls = getPointerEventsClass(props.pointerEvents, state);
-    if (cls) classes.push(cls);
-  }
-  if (props.userSelect) {
-    const cls = getUserSelectClass(props.userSelect, state);
-    if (cls) classes.push(cls);
-  }
-  return { className: clsx(...classes), style: {} };
+  const cursorResult = getEnumResponsiveStyles(styles, "cursor", props.cursor, state);
+  const pointerResult = getEnumResponsiveStyles(styles, "pointer", props.pointerEvents, state);
+  const selectResult = getEnumResponsiveStyles(styles, "select", props.userSelect, state);
+  return {
+    className: clsx(cursorResult.className, pointerResult.className, selectResult.className),
+    style: {}
+  };
 }
 function getInteractionStyles(props) {
-  const { cursor, pointerEvents, userSelect, _hover } = props;
-  const baseStyles = getInteractionStylesForState({ cursor, pointerEvents, userSelect }, "base");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getInteractionStylesForState(baseProps, "base");
   const hoverStyles = getInteractionStylesForState(_hover, "hover");
+  const focusStyles = getInteractionStylesForState(_focus, "focus");
+  const activeStyles = getInteractionStylesForState(_active, "active");
+  const disabledStyles = getInteractionStylesForState(_disabled, "disabled");
   return {
-    className: clsx(baseStyles.className, hoverStyles.className),
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
     style: {}
   };
 }