@servicetitan/anvil2 2.9.2 → 3.0.1

package/dist/Radio.css

@@ -1,231 +1,235 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._radio_1omms_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: inline-flex;
-  }
-  ._radio-group_1omms_15 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: revert-layer;
-  }
-}
-@layer base {
-  ._wrapper_1omms_30 {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  ._radio_1omms_2 {
-    display: inline-flex;
-    align-items: flex-start;
-    line-height: 1.5;
-    gap: 0.5rem;
-    position: relative;
-    color: var(--foreground-color, #141414);
-    font-size: 1rem;
-  }
-  ._radio_1omms_2 ._focus-label_1omms_44 {
-    border-radius: 0.75rem;
-    outline: 0 solid var(--focus-ring-color, #0265DC);
-    outline-offset: 2px;
-    transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1), outline 200ms cubic-bezier(0, 0, 0.4, 1);
-  }
-  ._radio_1omms_2 ._icon-wrapper_1omms_50 {
-    display: inline-flex;
-    border-radius: 100%;
-    background-color: transparent;
-    transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1), outline 200ms cubic-bezier(0, 0, 0.4, 1);
-    position: relative;
-    outline: 0 solid var(--focus-ring-color, #0265DC);
-  }
-  ._radio_1omms_2 ._icon-wrapper_1omms_50::before {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset-block: 0;
-    inset-inline: 0;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1);
-    pointer-events: none;
-    border-radius: inherit;
-  }
-  ._radio_1omms_2 input {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding-block: 0;
-    padding-inline: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  ._radio-group_1omms_15 {
-    display: inline-flex;
-    gap: 0.5rem;
-    flex-direction: column;
-  }
-  ._radio-group_1omms_15 ._legend_1omms_86 {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding-block: 0;
-    padding-inline: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  ._radio-group_1omms_15 ._label-row_1omms_98 {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-  ._radio-group_1omms_15 ._children_1omms_103 {
-    display: inline-flex;
-    gap: 0.5rem;
-    flex-direction: column;
-    flex-wrap: wrap;
-  }
-  ._helper-wrapper_1omms_109 {
-    margin-inline-start: 2rem;
-  }
-}
-@layer state {
-  ._radio_1omms_2:has(input:hover:not(:disabled)), ._radio_1omms_2:has(input[data-interactive=hover]:not(:disabled)), ._radio_1omms_2._error_1omms_114:has(input:hover:not(:disabled)), ._radio_1omms_2._error_1omms_114:has(input[data-interactive=hover]:not(:disabled)) {
-    cursor: pointer;
-  }
-  ._radio_1omms_2 input:hover:not(:disabled) ~ ._icon-wrapper_1omms_50:before,
-  ._radio_1omms_2 input[data-interactive=hover]:not(:disabled) ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._radio_1omms_2 input:hover:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before,
-  ._radio_1omms_2 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-hover-primary, rgba(2, 101, 220, 0.1019607843));
-  }
-  ._radio_1omms_2 input:active:not(:disabled),
-  ._radio_1omms_2 input[data-interactive=active]:not(:disabled) {
-    cursor: pointer;
-  }
-  ._radio_1omms_2 input:active:not(:disabled) ~ ._icon-wrapper_1omms_50:before,
-  ._radio_1omms_2 input[data-interactive=active]:not(:disabled) ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
-  }
-  ._radio_1omms_2 input:active:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before,
-  ._radio_1omms_2 input[data-interactive=active]:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-active-primary, rgba(2, 101, 220, 0.3019607843));
-  }
-  ._radio_1omms_2._error_1omms_114 input:hover:not(:disabled) ~ ._icon-wrapper_1omms_50:before, ._radio_1omms_2._error_1omms_114 input[data-interactive=hover]:not(:disabled) ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-hover-danger, rgba(225, 50, 18, 0.1019607843));
-  }
-  ._radio_1omms_2._error_1omms_114 input:hover:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before, ._radio_1omms_2._error_1omms_114 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-hover-danger, rgba(225, 50, 18, 0.1019607843));
-  }
-  ._radio_1omms_2._error_1omms_114 input:active:not(:disabled) ~ ._icon-wrapper_1omms_50:before, ._radio_1omms_2._error_1omms_114 input[data-interactive=active]:not(:disabled) ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-active-danger, rgba(225, 50, 18, 0.3019607843));
-  }
-  ._radio_1omms_2._error_1omms_114 input:active:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before, ._radio_1omms_2._error_1omms_114 input[data-interactive=active]:not(:disabled):checked ~ ._icon-wrapper_1omms_50:before {
-    content: "";
-    background-color: var(--overlay-color-active-danger, rgba(225, 50, 18, 0.3019607843));
-  }
-  ._radio_1omms_2 ._icon-unchecked_1omms_157,
-  ._radio_1omms_2 ._icon-checked_1omms_158 {
-    color: var(--foreground-color, #141414);
-    border-radius: 100%;
-  }
-  ._radio_1omms_2 ._icon-checked_1omms_158 {
-    color: var(--foreground-color-primary, #0265DC);
-    display: none;
-  }
-  ._radio_1omms_2._error_1omms_114 ._icon-wrapper_1omms_50 {
-    outline-color: var(--focus-ring-color-danger, #e13212);
-  }
-  ._radio_1omms_2._error_1omms_114 ._icon-unchecked_1omms_157,
-  ._radio_1omms_2._error_1omms_114 ._icon-checked_1omms_158 {
-    color: var(--foreground-color-danger, #e13212);
-  }
-  ._radio_1omms_2._error_1omms_114 ._icon-checked_1omms_158 {
-    display: none;
-  }
-  ._radio_1omms_2 input:focus-visible ~ ._icon-wrapper_1omms_50,
-  ._radio_1omms_2 input:focus-visible ~ ._focus-label_1omms_44 {
-    outline-width: 0.125rem;
-  }
-  ._radio_1omms_2 input[data-interactive=focus-visible]:not(:disabled) ~ ._icon-wrapper_1omms_50,
-  ._radio_1omms_2 input[data-interactive=focus-visible]:not(:disabled) ~ ._focus-label_1omms_44 {
-    outline-width: 0.125rem;
-  }
-  ._radio_1omms_2 input:checked ~ ._icon-wrapper_1omms_50 ._icon-unchecked_1omms_157 {
-    display: none;
-  }
-  ._radio_1omms_2 input:checked ~ ._icon-wrapper_1omms_50 ._icon-checked_1omms_158 {
-    display: inline-flex;
-  }
-  ._radio_1omms_2 input:checked:focus-visible ~ ._icon-wrapper_1omms_50, ._radio_1omms_2 input:checked:focus-visible ~ ._focus-label_1omms_44 {
-    outline-width: 0.125rem;
-  }
-  ._radio_1omms_2:has(input[disabled]) {
-    opacity: 0.6;
-    filter: grayscale(1);
-    cursor: not-allowed;
-  }
-  ._radio_1omms_2:has(input[disabled]) ._icon-unchecked_1omms_157,
-  ._radio_1omms_2:has(input[disabled]) ._icon-checked_1omms_158 {
-    color: var(--foreground-color-subdued, #737475);
-  }
-  ._radio_1omms_2:has(input[disabled]):hover ._icon-wrapper_1omms_50 {
-    outline-width: 0;
-  }
-  ._sr-only_1omms_205 {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding-block: 0;
-    padding-inline: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-}
-@layer application {
-  @media (prefers-reduced-motion: reduce) {
-    ._radio_1omms_2 ._icon-wrapper_1omms_50 {
-      transition-duration: 0.01ms !important;
-      transition-property: outline;
-    }
-  }
+.anvil2 {._wrapper_1fh0d_1 {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--a2-size-1, 0.25rem);
+}._radio_1fh0d_7 {
+  --a2-internal-radio-focus-ring-color: var(--a2-mod-radio-focus-ring-color);
+  --a2-internal-radio-foreground-color: var(
+    --a2-mod-radio-unchecked-foreground-color
+  );
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-unchecked-icon-background-color
+  );
+  --a2-internal-radio-icon-color: var(--a2-mod-radio-unchecked-icon-color);
+  --a2-mod-radio-checked-foreground-color: var(--a2-radio-default-checked-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-checked-icon-background-color: var(--a2-radio-default-checked-icon-background-color, var(--a2-background-color-transparent-primary, rgba(0, 0, 0, 0)));
+  --a2-mod-radio-checked-icon-background-color-active: var(--a2-radio-default-checked-icon-background-color-active, var(--a2-background-color-transparent-primary-active, light-dark(rgba(26, 130, 255, 0.3019607843), rgba(112, 177, 255, 0.2509803922))));
+  --a2-mod-radio-checked-icon-background-color-hover: var(--a2-radio-default-checked-icon-background-color-hover, var(--a2-background-color-transparent-primary-hover, light-dark(rgba(26, 130, 255, 0.1019607843), rgba(112, 177, 255, 0.1019607843))));
+  --a2-mod-radio-checked-icon-color: var(--a2-radio-default-checked-icon-color, var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+  --a2-mod-radio-checked-icon-color-active: var(--a2-radio-default-checked-icon-color-active, var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-200, #9ecaff))));
+  --a2-mod-radio-checked-icon-color-disabled: var(--a2-radio-default-checked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-radio-checked-icon-color-hover: var(--a2-radio-default-checked-icon-color-hover, var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff))));
+  --a2-mod-radio-error-checked-foreground-color: var(--a2-radio-error-checked-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-error-checked-icon-background-color: var(--a2-radio-error-checked-icon-background-color, var(--a2-background-color-transparent-danger, rgba(0, 0, 0, 0)));
+  --a2-mod-radio-error-checked-icon-background-color-active: var(--a2-radio-error-checked-icon-background-color-active, var(--a2-background-color-transparent-danger-active, light-dark(rgba(255, 57, 20, 0.3019607843), rgba(255, 134, 112, 0.2509803922))));
+  --a2-mod-radio-error-checked-icon-background-color-hover: var(--a2-radio-error-checked-icon-background-color-hover, var(--a2-background-color-transparent-danger-hover, light-dark(rgba(255, 57, 20, 0.1019607843), rgba(255, 134, 112, 0.1019607843))));
+  --a2-mod-radio-error-checked-icon-color: var(--a2-radio-error-checked-icon-color, var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+  --a2-mod-radio-error-checked-icon-color-active: var(--a2-radio-error-checked-icon-color-active, var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e))));
+  --a2-mod-radio-error-checked-icon-color-disabled: var(--a2-radio-error-checked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-radio-error-checked-icon-color-hover: var(--a2-radio-error-checked-icon-color-hover, var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670))));
+  --a2-mod-radio-error-focus-ring-color: var(--a2-radio-error-focus-ring-color, var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))));
+  --a2-mod-radio-error-unchecked-foreground-color: var(--a2-radio-error-unchecked-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-error-unchecked-icon-background-color: var(--a2-radio-error-unchecked-icon-background-color, var(--a2-background-color-transparent-danger, rgba(0, 0, 0, 0)));
+  --a2-mod-radio-error-unchecked-icon-background-color-active: var(--a2-radio-error-unchecked-icon-background-color-active, var(--a2-background-color-transparent-danger-active, light-dark(rgba(255, 57, 20, 0.3019607843), rgba(255, 134, 112, 0.2509803922))));
+  --a2-mod-radio-error-unchecked-icon-background-color-hover: var(--a2-radio-error-unchecked-icon-background-color-hover, var(--a2-background-color-transparent-danger-hover, light-dark(rgba(255, 57, 20, 0.1019607843), rgba(255, 134, 112, 0.1019607843))));
+  --a2-mod-radio-error-unchecked-icon-color: var(--a2-radio-error-unchecked-icon-color, var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+  --a2-mod-radio-error-unchecked-icon-color-active: var(--a2-radio-error-unchecked-icon-color-active, var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e))));
+  --a2-mod-radio-error-unchecked-icon-color-disabled: var(--a2-radio-error-unchecked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-radio-error-unchecked-icon-color-hover: var(--a2-radio-error-unchecked-icon-color-hover, var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670))));
+  --a2-mod-radio-focus-ring-color: var(--a2-radio-default-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+  --a2-mod-radio-unchecked-foreground-color: var(--a2-radio-default-unchecked-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-unchecked-icon-background-color: var(--a2-radio-default-unchecked-icon-background-color, var(--a2-background-color-transparent-default, rgba(0, 0, 0, 0)));
+  --a2-mod-radio-unchecked-icon-background-color-active: var(--a2-radio-default-unchecked-icon-background-color-active, var(--a2-background-color-transparent-default-active, light-dark(rgba(139, 139, 139, 0.1607843137), rgba(255, 255, 255, 0.1607843137))));
+  --a2-mod-radio-unchecked-icon-background-color-hover: var(--a2-radio-default-unchecked-icon-background-color-hover, var(--a2-background-color-transparent-default-hover, light-dark(rgba(139, 139, 139, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
+  --a2-mod-radio-unchecked-icon-color: var(--a2-radio-default-unchecked-icon-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-unchecked-icon-color-active: var(--a2-radio-default-unchecked-icon-color-active, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-radio-unchecked-icon-color-disabled: var(--a2-radio-default-unchecked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-radio-unchecked-icon-color-hover: var(--a2-radio-default-unchecked-icon-color-hover, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  all: unset;
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
+  font-size: 100%;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: revert-layer;
+  align-items: flex-start;
+  color: var(--a2-internal-radio-foreground-color);
+  display: inline-flex;
+  font-size: var(--a2-font-size-400, 1rem);
+  gap: var(--a2-size-2, 0.5rem);
+  line-height: 1.5;
+  position: relative;
+}._radio_1fh0d_7:hover:not(:has(input:disabled)), ._radio_1fh0d_7:has(input[data-interactive=hover]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-unchecked-icon-background-color-hover
+  );
+}._radio_1fh0d_7:active:not(:has(input:disabled)), ._radio_1fh0d_7:has(input[data-interactive=active]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-unchecked-icon-background-color-active
+  );
+}._radio_1fh0d_7:has(input:disabled) {
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-unchecked-icon-color-disabled
+  );
+  opacity: var(--a2-opacity-disabled, 0.6);
+}._radio_1fh0d_7:has(input:disabled) ._icon-wrapper_1fh0d_85 {
+  outline-width: 0;
+}._radio_1fh0d_7 input {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}._required-asterisk_1fh0d_101 {
+  color: var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)));
+  margin-inline-start: var(--a2-size-1, 0.25rem);
+}._focus-label_1fh0d_106 {
+  color: var(--a2-internal-radio-foreground-color);
+  outline: 0 solid var(--a2-mod-radio-label-focus-ring-color, --a2-internal-radio-focus-ring-color);
+  outline-offset: var(--a2-size-half, 0.125rem);
+  border-radius: var(--a2-mod-radio-label-border-radius);
+  transition: background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+}._icon-wrapper_1fh0d_85 {
+  background-color: var(--a2-internal-radio-icon-background-color);
+  border-radius: var(--a2-radio-border-radius, var(--a2-border-radius-circular, 100%));
+  display: inline-flex;
+  outline: 0 solid var(--a2-internal-radio-focus-ring-color);
+  position: relative;
+  transition: background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+}@media (prefers-reduced-motion: reduce) {
+  ._icon-wrapper_1fh0d_85 {
+    transition-duration: 0.01ms !important;
+    transition-property: outline;
+  }
+}._helper-wrapper_1fh0d_129 {
+  margin-inline-start: var(--a2-size-8, 2rem);
+}._icon_1fh0d_85 {
+  border-radius: var(--a2-radio-border-radius, var(--a2-border-radius-circular, 100%));
+  color: var(--a2-internal-radio-icon-color);
+}input:focus-visible ~ ._icon-wrapper_1fh0d_85,
+input:focus-visible ~ ._focus-label_1fh0d_106,
+input[data-interactive=focus-visible] ~ ._icon-wrapper_1fh0d_85,
+input[data-interactive=focus-visible] ~ ._focus-label_1fh0d_106 {
+  outline-width: var(--a2-size-half, 0.125rem);
+}._radio-checked_1fh0d_145,
+._radio-indeterminate_1fh0d_146 {
+  --a2-internal-radio-foreground-color: var(
+    --a2-mod-radio-checked-foreground-color
+  );
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-checked-icon-background-color
+  );
+  --a2-internal-radio-icon-color: var(--a2-mod-radio-checked-icon-color);
+}._radio-checked_1fh0d_145:hover:not(:has(input:disabled)), ._radio-checked_1fh0d_145:has(input[data-interactive=hover]:not(:disabled)),
+._radio-indeterminate_1fh0d_146:hover:not(:has(input:disabled)),
+._radio-indeterminate_1fh0d_146:has(input[data-interactive=hover]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-checked-icon-background-color-hover
+  );
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-checked-icon-color-hover
+  );
+}._radio-checked_1fh0d_145:active:not(:has(input:disabled)), ._radio-checked_1fh0d_145:has(input[data-interactive=active]:not(:disabled)),
+._radio-indeterminate_1fh0d_146:active:not(:has(input:disabled)),
+._radio-indeterminate_1fh0d_146:has(input[data-interactive=active]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-checked-icon-background-color-active
+  );
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-checked-icon-color-active
+  );
+}._radio-checked_1fh0d_145:has(input:disabled),
+._radio-indeterminate_1fh0d_146:has(input:disabled) {
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-checked-icon-color-disabled
+  );
+}._radio-error_1fh0d_182 {
+  --a2-internal-radio-focus-ring-color: var(
+    --a2-mod-radio-error-focus-ring-color
+  );
+  --a2-internal-radio-foreground-color: var(
+    --a2-mod-radio-error-unchecked-foreground-color
+  );
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-error-unchecked-icon-background-color
+  );
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-error-unchecked-icon-color
+  );
+}._radio-error_1fh0d_182:hover:not(:has(input:disabled)), ._radio-error_1fh0d_182:has(input[data-interactive=hover]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-error-unchecked-icon-background-color-hover
+  );
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-error-unchecked-icon-color-hover
+  );
+}._radio-error_1fh0d_182:active:not(:has(input:disabled)), ._radio-error_1fh0d_182:has(input[data-interactive=active]:not(:disabled)) {
+  --a2-internal-radio-icon-background-color: var(
+    --a2-mod-radio-error-unchecked-icon-background-color-active
+  );
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-error-unchecked-icon-color-active
+  );
+}._radio-error_1fh0d_182:has(input:disabled) {
+  --a2-internal-radio-icon-color: var(
+    --a2-mod-radio-error-unchecked-icon-color-disabled
+  );
+}._sr-only_1fh0d_218 {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}._radio-group_1fh0d_231 {
+  all: unset;
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
+  font-size: 100%;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: revert-layer;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--a2-size-2, 0.5rem);
+}._legend_1fh0d_248 {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}._children_1fh0d_261 {
+  display: inline-flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--a2-size-2, 0.5rem);
+}._label_1fh0d_268._direction-row_1fh0d_268 {
+  justify-content: center;
+  min-height: var(--a2-size-6, 1.5rem);
+}._label-row_1fh0d_273 {
+  display: flex;
+  align-items: center;
 }
-fieldset[data-anv="radio-group"][data-anv="radio-group"] > label {
-  font-size: 0.875rem;
 }

package/dist/Radio.js

@@ -1,2 +1,2 @@
-export { R as Radio, R as default } from './Radio-CeVjHOXe.js';
+export { R as Radio, R as default } from './Radio-CQaXJ72d.js';
 //# sourceMappingURL=Radio.js.map

package/dist/{SearchField-im7AHGYo.js → SearchField-BKJOW-vI.js}

@@ -2,28 +2,26 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef, useState, useId, useRef, useEffect } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { t as textFieldStyles } from './TextField.module-BP-hDP5m.js';
+import { t as textFieldStyles } from './TextField.module-MRVo1X9H.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
-import { I as Icon } from './Icon-DuIlne4x.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 import { useTrackingId } from './useTrackingId.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 
 import './SearchField.css';const SvgSearch = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }));
 
-const searchfield = "_searchfield_12ckm_2";
-const clear = "_clear_12ckm_11";
-const input = "_input_12ckm_7";
+const clear = "_clear_14btk_5";
+const input = "_input_14btk_1";
 const styles = {
-	searchfield: searchfield,
-	"input-wrapper": "_input-wrapper_12ckm_7",
+	"input-wrapper": "_input-wrapper_14btk_1",
 	clear: clear,
 	input: input,
-	"input--has-value": "_input--has-value_12ckm_21"
+	"input--has-value": "_input--has-value_14btk_21"
 };
 
-const SearchField$1 = forwardRef(
+const SearchField = forwardRef(
   function SearchField2(props, ref) {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
@@ -183,12 +181,5 @@ const SearchField$1 = forwardRef(
   }
 );
 
-const SearchField = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(SearchField$1, { ref, ...props });
-  }
-);
-SearchField.displayName = "SearchField";
-
-export { SearchField as S, SvgSearch as a, SearchField$1 as b };
-//# sourceMappingURL=SearchField-im7AHGYo.js.map
+export { SearchField as S, SvgSearch as a };
+//# sourceMappingURL=SearchField-BKJOW-vI.js.map

package/dist/SearchField-BKJOW-vI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField-BKJOW-vI.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/internal/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n  forwardRef,\n  ComponentPropsWithoutRef,\n  useId,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"../SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { SrOnly } from \"../../SrOnly\";\nimport { Icon } from \"../../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n  LayoutUtilProps & {\n    /**\n     * Size of the search field\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"xsmall\" | \"small\" | \"medium\" | \"large\">;\n    /**\n     * Whether the search field is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)\n     */\n    onClear?: () => void;\n  } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\n * - Multiple size variants (xsmall, small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n *   placeholder=\"Search users...\"\n *   onChange={(e) => setSearchTerm(e.target.value)}\n *   onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n *   size=\"large\"\n *   value={searchValue}\n *   onChange={(e) => setSearchValue(e.target.value)}\n *   disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  function SearchField(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      size,\n      onChange,\n      onClear,\n      id: idProp,\n      disabled,\n      style,\n      value,\n      placeholder = \"Search...\",\n      autoComplete = \"off\",\n      ...rest\n    } = componentProps;\n\n    const [hasValue, setHasValue] = useState(\n      rest.defaultValue || value ? true : false,\n    );\n    const placeholderUid = useId();\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const styleCombined = { ...style, ...layoutStyles };\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.value) {\n        setHasValue(true);\n      } else {\n        setHasValue(false);\n      }\n      onChange?.(e);\n    };\n\n    useEffect(() => {\n      if (typeof value === \"undefined\") return;\n      if (value === \"\" || !value) {\n        setHasValue(false);\n      } else {\n        setHasValue(true);\n      }\n    }, [value]);\n\n    const handleClear = () => {\n      if (!inputRef.current) return;\n      if (disabled || rest.readOnly) return;\n      onClear?.();\n      if (value) {\n        inputRef.current.focus();\n        return;\n      }\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\",\n      )?.set;\n      nativeInputValueSetter?.call(inputRef.current, \"\");\n      inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n      setHasValue(false);\n      inputRef.current.focus();\n    };\n\n    const handleClearKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n      if (e.code === \"Enter\" || e.code === \"Space\") {\n        e.preventDefault();\n        handleClear();\n      } else if (e.code === \"ArrowLeft\") {\n        e.preventDefault();\n        inputRef.current?.focus();\n      }\n    };\n\n    const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === \"ArrowRight\" && hasValue) {\n        const input = e.currentTarget;\n        if (input.selectionStart === input.value.length) {\n          e.preventDefault();\n          const clearButton = input.parentElement?.querySelector(\n            '[role=\"button\"]',\n          ) as HTMLElement;\n          clearButton?.focus();\n        }\n      }\n    };\n\n    const data = {\n      value: props.value,\n      defaultValue: props.defaultValue,\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      size: props.size,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"SearchField\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    return (\n      <div\n        className={cx(\n          textfieldStyles[\"textfield\"],\n          styles[\"searchfield\"],\n          className,\n        )}\n        data-anv=\"SearchField\"\n        style={styleCombined}\n      >\n        <div\n          className={cx(\n            textfieldStyles[\"input-wrapper\"],\n            styles[\"input-wrapper\"],\n            {\n              [textfieldStyles[\"xsmall\"]]: size === \"xsmall\",\n              [textfieldStyles[\"small\"]]: size === \"small\",\n              [textfieldStyles[\"large\"]]: size === \"large\",\n            },\n          )}\n          role=\"presentation\"\n          onClick={() => inputRef.current?.focus()}\n        >\n          <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n            <Icon aria-label=\"search\" svg={Search} />\n          </div>\n          <input\n            className={cx(textfieldStyles[\"input\"], styles[\"input\"], {\n              [styles[\"input--has-value\"]]: hasValue,\n            })}\n            ref={useMergeRefs([ref, inputRef])}\n            onChange={handleOnChange}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            value={value}\n            type=\"search\"\n            autoComplete={autoComplete}\n            disabled={disabled}\n            aria-labelledby={placeholderUid}\n            data-tracking-id={trackingId}\n            {...rest}\n          />\n          <Icon\n            aria-label=\"Clear search\"\n            svg={Close}\n            role=\"button\"\n            onClick={handleClear}\n            onKeyDown={handleClearKeyDown}\n            tabIndex={-1}\n            className={styles[\"clear\"]}\n            aria-disabled={disabled}\n            style={{\n              visibility: hasValue ? \"visible\" : \"hidden\",\n            }}\n          />\n        </div>\n        <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n      </div>\n    );\n  },\n);\n"],"names":["SearchField","textfieldStyles","Search","Close"],"mappings":"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"}

package/dist/SearchField-BplvDpBG.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { S as SearchField$1 } from './SearchField-BKJOW-vI.js';
+import { forwardRef } from 'react';
+
+const SearchField = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(SearchField$1, { ref, ...props });
+  }
+);
+SearchField.displayName = "SearchField";
+
+export { SearchField as S };
+//# sourceMappingURL=SearchField-BplvDpBG.js.map

package/dist/SearchField-BplvDpBG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField-BplvDpBG.js","sources":["../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import {\n  SearchField as CoreSearchField,\n  SearchFieldProps as CoreSearchFieldProps,\n} from \"./internal/SearchField\";\nimport { forwardRef } from \"react\";\nimport { DistributiveOmit } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = DistributiveOmit<\n  CoreSearchFieldProps,\n  \"size\"\n> & {\n  /**\n   * Size of the search field\n   * @default \"medium\"\n   */\n  size?: Extract<CoreSearchFieldProps[\"size\"], \"small\" | \"medium\" | \"large\">;\n};\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n *   placeholder=\"Search users...\"\n *   onChange={(e) => setSearchTerm(e.target.value)}\n *   onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n *   size=\"large\"\n *   value={searchValue}\n *   onChange={(e) => setSearchValue(e.target.value)}\n *   disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (props, ref) => {\n    return <CoreSearchField ref={ref} {...props} />;\n  },\n);\nSearchField.displayName = \"SearchField\";\n"],"names":["CoreSearchField"],"mappings":";;;;AAyDO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,uBAAO,GAAA,CAACA,aAAA,EAAA,EAAgB,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAC/C;AACF;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}