@hyphen/hyphen-components 4.3.2 → 4.4.1

package/dist/css/index.css

@@ -2,7 +2,7 @@
 .Alert-module_alert__zP4AL{border-style:solid;border-width:var(--size-border-width-sm);box-shadow:var(--size-box-shadow-0);font-family:var(--assets-font-family-body)}.Alert-module_alert__zP4AL .Alert-module_close-icon__zs4Xk>button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}.Alert-module_alert__zP4AL .Alert-module_close-icon__zs4Xk>button:hover{color:var(--color-base-grey-600)}.Alert-module_alert-heading__VguTk{line-height:var(--size-line-height-heading)}.Alert-module_alert__default__-pcBw{background:var(--color-base-grey-100);border-color:var(--color-base-grey-200);color:var(--color-base-grey-500)}.Alert-module_alert__info__UZeOd{background:var(--color-base-blue-50);border-color:var(--color-base-blue-200);color:var(--color-base-grey-500)}.Alert-module_alert__success__o2IHF{background:var(--color-base-green-50);border-color:var(--color-base-green-200);color:var(--color-base-grey-500)}.Alert-module_alert__warning__lzTY-{background:var(--alert-warning-background-color,var(--color-base-yellow-50));border-color:var(--color-base-yellow-200);color:var(--color-base-grey-500)}.Alert-module_alert__danger__M-XFh{background:var(--color-base-red-50);border-color:var(--color-base-red-200);color:var(--color-base-grey-500)}.Alert-module_alert__icon__default__cCx9C{color:var(--color-base-grey-600)}.Alert-module_alert__icon__info__2W0Bi{color:var(--color-base-blue-500)}.Alert-module_alert__icon__success__NBCDO{color:var(--color-base-green-500)}.Alert-module_alert__icon__warning__nY4hy{color:var(--color-base-yellow-500)}.Alert-module_alert__icon__danger__NcOrf{color:var(--color-base-red-500)}
 .Badge-module_badge__ZbEBU.Badge-module_size-sm__rL8a6,.Badge-module_size-sm__rL8a6{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md__kf6IH,.Badge-module_size-md__kf6IH{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg__of6XJ,.Badge-module_size-lg__of6XJ{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}.Badge-module_badge__ZbEBU{border-style:solid;border-width:var(--size-border-width-sm);font-weight:var(--size-font-weight-semibold);line-height:var(--size-line-height-base)}.Badge-module_badge__ZbEBU.Badge-module_inverse__qZCFA{background-color:var(--color-background-inverse);border-color:var(--color-background-inverse);color:var(--color-font-inverse)}.Badge-module_badge__ZbEBU.Badge-module_purple__rX-xW{background-color:var(--color-base-purple-500);border-color:var(--color-base-purple-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_green__W03uU{background-color:var(--color-base-green-500);border-color:var(--color-base-green-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_red__fl2jg{background-color:var(--color-base-red-500);border-color:var(--color-base-red-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_blue__C7kyV{background-color:var(--color-base-blue-500);border-color:var(--color-base-blue-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_yellow__gGZ6R{background-color:var(--color-base-yellow-400);border-color:var(--color-base-yellow-500);color:var(--color-base-black-500)}.Badge-module_badge__ZbEBU.Badge-module_light-grey__Wtrhx{background-color:var(--color-base-grey-200);border-color:var(--color-base-grey-200);color:var(--color-base-grey-600)}.Badge-module_badge__ZbEBU.Badge-module_dark-grey__X-807{background-color:var(--color-base-grey-400);border-color:var(--color-base-grey-400);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_hyphen__9pe7x{background:var(--color-background-brand-gradient);border-color:var(--color-base-yellow-500);color:var(--color-base-white)}@media (min-width:680px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-tablet__6xMVk{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-tablet__4w-7I{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-tablet__8xyRF{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}@media (min-width:992px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-desktop__Ayf5L{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-desktop__XSq7m{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-desktop__Baw3S{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}@media (min-width:1280px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-hd__Da6Au{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-hd__-VNMk{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-hd__6MOwL{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}
 .Spinner-module_spinner__SZoUP svg{animation:Spinner-module_spin__Yk0wm 1.5s linear infinite;display:inherit}@keyframes Spinner-module_spin__Yk0wm{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
-:root{--button-box-shadow-focus:0 0 0 4px var(--color-base-primary-200);--button-neutral-box-shadow-focus:0 0 0 4px var(--color-base-grey-200);--button-danger-box-shadow-focus:0 0 0 4px var(--color-base-danger-200)}.Button-module_button__18Bed.Button-module_size-sm__6Xrjw,.Button-module_size-sm__6Xrjw{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md__BkuGu,.Button-module_size-md__BkuGu{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg__JVYWV,.Button-module_size-lg__JVYWV{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}.Button-module_button__18Bed{align-items:center;background-color:transparent;border:1px solid transparent;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--assets-font-family-body);font-weight:var(--size-font-weight-semi-bold);gap:var(--size-spacing-sm);justify-content:center;line-height:1;padding:0;position:relative;text-align:center;text-decoration:none;transition-duration:.1s;transition-property:background-color,border,box-shadow,color;transition-timing-function:cubic-bezier(.67,.83,.67)}.Button-module_button__18Bed:hover{text-decoration:none}.Button-module_button__18Bed:disabled,.Button-module_button__18Bed[aria-disabled=true]{cursor:not-allowed;opacity:.45}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-background-button-primary);color:var(--color-font-button-primary)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-background-button-primary-hover);color:var(--color-font-button-primary-hover)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):active{background-color:var(--color-background-button-primary-active);color:var(--color-font-button-primary-active)}.Button-module_button__18Bed.Button-module_primary__st6yY:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-background-button-secondary);border:1px solid;border-color:var(--color-border-button-secondary);color:var(--color-font-button-secondary)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-background-button-secondary-hover);border-color:var(--color-border-button-secondary-hover);color:var(--color-font-button-secondary-hover)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):active{background-color:var(--color-background-button-secondary-active);border-color:var(--color-border-button-secondary-active);color:var(--color-font-button-secondary-active)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM{background-color:var(--color-background-button-tertiary);color:var(--color-font-button-tertiary)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):hover{background-color:var(--color-background-button-tertiary-hover);border-color:var(--color-border-button-tertiary-hover);color:var(--color-font-button-tertiary-hover)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):active{background-color:var(--color-background-button-tertiary-active);border-color:var(--color-border-button-tertiary-active);color:var(--color-font-button-tertiary-active)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n{background-color:var(--color-background-button-danger);color:var(--color-font-button-danger)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):hover{background-color:var(--color-background-button-danger-hover);color:var(--color-font-button-danger-hover)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):active{background-color:var(--color-background-button-danger-active);color:var(--color-font-button-danger-active)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus-visible{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus:not(:focus-visible){box-shadow:none;outline:0}@media (min-width:680px){.Button-module_button__18Bed.Button-module_size-sm-tablet__9XaSx{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-tablet__YQxaI{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-tablet__h3l97{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:992px){.Button-module_button__18Bed.Button-module_size-sm-desktop__8tTsg{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-desktop__OCdDi{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-desktop__uFc4f{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:1280px){.Button-module_button__18Bed.Button-module_size-sm-hd__INFfD{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-hd__8e2mW{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-hd__DH60l{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}.Button-module_button__18Bed.Button-module_loading__QfItr .Button-module_label__1PsXG{visibility:hidden}.Button-module_button__18Bed.Button-module_full-width__qDri6{width:100%}.Button-module_spinner-wrapper__rALNw{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
+:root{--button-box-shadow-focus:0 0 0 4px var(--color-base-primary-200);--button-neutral-box-shadow-focus:0 0 0 4px var(--color-base-grey-200);--button-danger-box-shadow-focus:0 0 0 4px var(--color-base-danger-200)}.Button-module_button__18Bed.Button-module_size-sm__6Xrjw,.Button-module_size-sm__6Xrjw{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md__BkuGu,.Button-module_size-md__BkuGu{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg__JVYWV,.Button-module_size-lg__JVYWV{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}.Button-module_button__18Bed{align-items:center;background-color:transparent;border:1px solid transparent;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--assets-font-family-body);font-weight:var(--size-font-weight-semi-bold);gap:var(--size-spacing-sm);justify-content:center;line-height:1;padding:0;position:relative;text-align:center;text-decoration:none;transition-duration:.1s;transition-property:background-color,border,box-shadow,color;transition-timing-function:cubic-bezier(.67,.83,.67)}.Button-module_button__18Bed:hover{text-decoration:none}.Button-module_button__18Bed:disabled,.Button-module_button__18Bed[aria-disabled=true]{cursor:not-allowed;opacity:.45}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-background-button-primary);border-color:var(--color-border-button-primary);color:var(--color-font-button-primary)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-background-button-primary-hover);border-color:var(--color-border-button-primary-hover);color:var(--color-font-button-primary-hover)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):active{background-color:var(--color-background-button-primary-active);border-color:var(--color-border-button-primary-active);color:var(--color-font-button-primary-active)}.Button-module_button__18Bed.Button-module_primary__st6yY:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-background-button-secondary);border:1px solid;border-color:var(--color-border-button-secondary);color:var(--color-font-button-secondary)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-background-button-secondary-hover);border-color:var(--color-border-button-secondary-hover);color:var(--color-font-button-secondary-hover)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):active{background-color:var(--color-background-button-secondary-active);border-color:var(--color-border-button-secondary-active);color:var(--color-font-button-secondary-active)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM{background-color:var(--color-background-button-tertiary);color:var(--color-font-button-tertiary)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):hover{background-color:var(--color-background-button-tertiary-hover);border-color:var(--color-border-button-tertiary-hover);color:var(--color-font-button-tertiary-hover)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):active{background-color:var(--color-background-button-tertiary-active);border-color:var(--color-border-button-tertiary-active);color:var(--color-font-button-tertiary-active)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n{background-color:var(--color-background-button-danger);color:var(--color-font-button-danger)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):hover{background-color:var(--color-background-button-danger-hover);color:var(--color-font-button-danger-hover)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):active{background-color:var(--color-background-button-danger-active);color:var(--color-font-button-danger-active)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus-visible{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus:not(:focus-visible){box-shadow:none;outline:0}@media (min-width:680px){.Button-module_button__18Bed.Button-module_size-sm-tablet__9XaSx{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-tablet__YQxaI{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-tablet__h3l97{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:992px){.Button-module_button__18Bed.Button-module_size-sm-desktop__8tTsg{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-desktop__OCdDi{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-desktop__uFc4f{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:1280px){.Button-module_button__18Bed.Button-module_size-sm-hd__INFfD{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-hd__8e2mW{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-hd__DH60l{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}.Button-module_button__18Bed.Button-module_loading__QfItr .Button-module_label__1PsXG{visibility:hidden}.Button-module_button__18Bed.Button-module_full-width__qDri6{width:100%}.Button-module_spinner-wrapper__rALNw{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
 .Heading-module_heading__zKyv7{font-family:var(--assets-font-family-brand);font-weight:var(--size-font-weight-semibold);line-height:var(--size-line-height-heading)}
 .Card-module_card-section-border__OefDX+.Card-module_card-section-border__OefDX{border-top:1px solid var(--card-section-border-color,var(--color-border-subtle))}
 .Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm__mJkMQ,.Checkbox-module_size-sm__mJkMQ{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm__mJkMQ *,.Checkbox-module_size-sm__mJkMQ *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md__I2s8g,.Checkbox-module_size-md__I2s8g{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md__I2s8g *,.Checkbox-module_size-md__I2s8g *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg__rFFnb,.Checkbox-module_size-lg__rFFnb{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg__rFFnb *,.Checkbox-module_size-lg__rFFnb *{height:36px;width:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_hidden__2y7Zr{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;height:0;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_checkbox__dY-7P input+div{background:var(--form-control-background-color,var(--color-base-white));color:var(--form-control-checkbox-color,var(--color-base-grey-500))}.Checkbox-module_checkbox__dY-7P input:checked+div,.Checkbox-module_checkbox__dY-7P input:indeterminate+div{color:var(--form-control-checkbox-color-checked,var(--color-base-primary-500))}.Checkbox-module_checkbox__dY-7P input[aria-invalid=true]+div{color:var(--form-control-font-color-error,var(--color-base-danger-500))}.Checkbox-module_checkbox__dY-7P input:focus+div{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Checkbox-module_checkbox__dY-7P input:focus-visible+div{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Checkbox-module_checkbox__dY-7P input:disabled+div{background:var(--form-control-background-color-disabled,var(--color-base-grey-50));color:var(--form-control-checkbox-color-disabled,var(--color-base-grey-200))}.Checkbox-module_checkbox__dY-7P input:focus:not(:focus-visible)+div{box-shadow:none;outline:0}.Checkbox-module_checkbox__dY-7P input:checked:disabled+div{color:var(--form-control-checkbox-color-checked-disabled,var(--color-base-primary-200))}@media (min-width:680px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-tablet__GhQUW{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-tablet__GhQUW *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-tablet__XRHf4{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-tablet__XRHf4 *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-tablet__quoAJ{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-tablet__quoAJ *{height:36px;width:36px}}@media (min-width:992px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-desktop__fqeEc{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-desktop__fqeEc *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-desktop__9a278{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-desktop__9a278 *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-desktop__WQnv0{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-desktop__WQnv0 *{height:36px;width:36px}}@media (min-width:1280px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-hd__X3yIF{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-hd__X3yIF *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-hd__6T0dF{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-hd__6T0dF *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-hd__UXCt1{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-hd__UXCt1 *{height:36px;width:36px}}

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 19:08:59 GMT
+ * Generated on Mon, 20 Jan 2025 18:32:29 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -336,6 +336,24 @@
 
 .focus\:border-color-info:focus { border-color: var(--color-border-info); }
 
+.border-color-button-primary { border-color: var(--color-border-button-primary); }
+
+.hover\:border-color-button-primary:hover { border-color: var(--color-border-button-primary); }
+
+.focus\:border-color-button-primary:focus { border-color: var(--color-border-button-primary); }
+
+.border-color-button-primary-hover { border-color: var(--color-border-button-primary-hover); }
+
+.hover\:border-color-button-primary-hover:hover { border-color: var(--color-border-button-primary-hover); }
+
+.focus\:border-color-button-primary-hover:focus { border-color: var(--color-border-button-primary-hover); }
+
+.border-color-button-primary-active { border-color: var(--color-border-button-primary-active); }
+
+.hover\:border-color-button-primary-active:hover { border-color: var(--color-border-button-primary-active); }
+
+.focus\:border-color-button-primary-active:focus { border-color: var(--color-border-button-primary-active); }
+
 .border-color-button-secondary { border-color: var(--color-border-button-secondary); }
 
 .hover\:border-color-button-secondary:hover { border-color: var(--color-border-button-secondary); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 19:08:59 GMT
+ * Generated on Mon, 20 Jan 2025 18:32:29 GMT
  */
 
 :root {
@@ -137,6 +137,9 @@
   --color-border-warning: #fde047;
   --color-border-inverse: #262626;
   --color-border-info: #bfdbfe;
+  --color-border-button-primary: #171717;
+  --color-border-button-primary-hover: #262626;
+  --color-border-button-primary-active: #171717;
   --color-border-button-secondary: #b9b9b9;
   --color-border-button-secondary-hover: #b9b9b9;
   --color-border-button-secondary-active: #989898;
@@ -333,7 +336,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 19:08:59 GMT
+ * Generated on Mon, 20 Jan 2025 18:32:29 GMT
  */
 
 :root.dark {
@@ -370,6 +373,9 @@
   --color-border-warning: #fef08a;
   --color-border-inverse: #d4d4d4;
   --color-border-info: #bfdbfe;
+  --color-border-button-primary: #ffffff;
+  --color-border-button-primary-hover: #e5e5e5;
+  --color-border-button-primary-active: #e5e5e5;
   --color-border-button-secondary: #686868;
   --color-border-button-secondary-hover: #686868;
   --color-border-button-secondary-active: #4b4b4b;

package/dist/lib/tokens.d.ts

@@ -8,7 +8,7 @@ export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "prima
 export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
 export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
 export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "modal" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
-export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
+export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.3.2",
+  "version": "4.4.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -61,7 +61,7 @@
     }
   ],
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.20.0",
+    "@hyphen/hyphen-design-tokens": "^4.21.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -82,7 +82,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
-    "@chromatic-com/storybook": "^1.8.0",
+    "@chromatic-com/storybook": "^3.2.4",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
     "@storybook/addon-essentials": "^8.4.2",

package/src/components/Button/Button.module.scss

@@ -114,15 +114,18 @@
   &.primary {
     background-color: var(--color-background-button-primary);
     color: var(--color-font-button-primary);
+    border-color: var(--color-border-button-primary);
 
     &:not(:disabled):hover {
       background-color: var(--color-background-button-primary-hover);
       color: var(--color-font-button-primary-hover);
+      border-color: var(--color-border-button-primary-hover);
     }
 
     &:not(:disabled):active {
       background-color: var(--color-background-button-primary-active);
       color: var(--color-font-button-primary-active);
+      border-color: var(--color-border-button-primary-active);
     }
 
     &:focus {