@hopper-ui/components 1.0.2 → 1.0.3

package/dist/buttons/src/Button.js

@@ -1,18 +1,18 @@
-export { _Button as Button, GlobalButtonCssSelector } from '../../chunk-M67A5LAA.js';
+export { _Button as Button, GlobalButtonCssSelector } from '../../chunk-UY7WQ7TC.js';
 import '../../chunk-H5YTU3U7.js';
 import '../../chunk-NH3IVMXB.js';
+import '../../chunk-H6CDFWVR.js';
+import '../../chunk-WLSLSMK7.js';
+import '../../chunk-CTK5YVBZ.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-4ZYV2XLW.js';
 import '../../chunk-WMTWFKKP.js';
-import '../../chunk-LL2FMAAO.js';
 import '../../chunk-ZWU6DRRZ.js';
-import '../../chunk-RLIG2IHH.js';
-import '../../chunk-65JPI4FL.js';
-import '../../chunk-4ZYV2XLW.js';
-import '../../chunk-2NABNL6G.js';
+import '../../chunk-4RIAVSLK.js';
 import '../../chunk-HXI3MEEK.js';
-import '../../chunk-OE5BLFZI.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
 import '../../chunk-M36KANKC.js';
 import '../../chunk-DHVVYSLB.js';
-import '../../chunk-NUUG5PFN.js';
-import '../../chunk-KVDXQMWI.js';
-import '../../chunk-HVKOIMMW.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/ButtonContext.js

@@ -1,2 +1,2 @@
 export { ButtonContext } from '../../chunk-WMTWFKKP.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/ButtonGroup.css

@@ -1,38 +1,38 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
-.ButtonGroup-module__hop-ButtonGroup___tl-HT {
+.ButtonGroup-module__hop-ButtonGroup___J-bP3 {
   display: inline-flex;
   flex-wrap: nowrap;
   gap: var(--hop-space-inline-md);
 }
-.ButtonGroup-module__hop-ButtonGroup--horizontal___-i-xm {
+.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
   justify-content: center;
 }
-.ButtonGroup-module__hop-ButtonGroup--vertical___crYGf {
+.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
   flex-direction: column;
   gap: var(--hop-space-stack-md);
   align-items: center;
 }
-.ButtonGroup-module__hop-ButtonGroup--start___M7t2Y.ButtonGroup-module__hop-ButtonGroup--vertical___crYGf {
+.ButtonGroup-module__hop-ButtonGroup--start___OQ5-x.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
   align-items: flex-start;
 }
-.ButtonGroup-module__hop-ButtonGroup--center___Mf-cB.ButtonGroup-module__hop-ButtonGroup--vertical___crYGf {
+.ButtonGroup-module__hop-ButtonGroup--center___Wa8qq.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
   align-items: center;
 }
-.ButtonGroup-module__hop-ButtonGroup--end___Iyv8S.ButtonGroup-module__hop-ButtonGroup--vertical___crYGf {
+.ButtonGroup-module__hop-ButtonGroup--end___Bnq-S.ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj {
   align-items: flex-end;
 }
-.ButtonGroup-module__hop-ButtonGroup--start___M7t2Y.ButtonGroup-module__hop-ButtonGroup--horizontal___-i-xm {
+.ButtonGroup-module__hop-ButtonGroup--start___OQ5-x.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
   justify-content: flex-start;
 }
-.ButtonGroup-module__hop-ButtonGroup--center___Mf-cB.ButtonGroup-module__hop-ButtonGroup--horizontal___-i-xm {
+.ButtonGroup-module__hop-ButtonGroup--center___Wa8qq.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
   justify-content: center;
 }
-.ButtonGroup-module__hop-ButtonGroup--end___Iyv8S.ButtonGroup-module__hop-ButtonGroup--horizontal___-i-xm {
+.ButtonGroup-module__hop-ButtonGroup--end___Bnq-S.ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu {
   justify-content: flex-end;
 }
-.ButtonGroup-module__hop-ButtonGroup--wrap___ZBp9o {
+.ButtonGroup-module__hop-ButtonGroup--wrap___w7xGi {
   flex-wrap: wrap;
 }
-.ButtonGroup-module__hop-ButtonGroup--fluid___EO5tD {
+.ButtonGroup-module__hop-ButtonGroup--fluid___cYLTZ {
   inline-size: 100%;
 }

package/dist/buttons/src/ButtonGroup.d.ts

@@ -12,7 +12,7 @@ interface ButtonGroupProps extends StyledComponentProps<HTMLAttributes<HTMLDivEl
     /** Whether the Buttons in the ButtonGroup are all disabled. */
     isDisabled?: boolean;
     /** Whether the Buttons in the ButtonGroup are all fluid. */
-    fluid?: ResponsiveProp<boolean>;
+    isFluid?: ResponsiveProp<boolean>;
     /**
      * The size of the buttons in the ButtonGroup.
      * @default "md"

package/dist/buttons/src/ButtonGroup.js

@@ -1,83 +1,6 @@
-import { ButtonGroupContext } from '../../chunk-VJQ7M2BK.js';
-import { ButtonContext } from '../../chunk-WMTWFKKP.js';
-import { SlotProvider } from '../../chunk-M36KANKC.js';
-import { cssModule } from '../../chunk-KVDXQMWI.js';
-import '../../chunk-YSQDPG26.js';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
-import { filterDOMProps } from '@react-aria/utils';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { useContextProps } from 'react-aria-components';
-import { jsx } from 'react/jsx-runtime';
-
-// css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___tl-HT", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___-i-xm", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___crYGf", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___M7t2Y", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___Mf-cB", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___Iyv8S", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___ZBp9o", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___EO5tD" };
-var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
-function ButtonGroup(props, ref) {
-  var _a, _b, _c, _d, _e;
-  [props, ref] = useContextProps(props, ref, ButtonGroupContext);
-  const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const {
-    children,
-    size: sizeProp,
-    fluid: fluidProp,
-    isDisabled = false,
-    className,
-    align: alignProp,
-    style: styleProp,
-    orientation: orientationProp,
-    wrap: wrapProp,
-    ...otherProps
-  } = ownProps;
-  const align = (_a = useResponsiveValue(alignProp)) != null ? _a : "start";
-  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
-  const fluid = (_c = useResponsiveValue(fluidProp)) != null ? _c : false;
-  const wrap = (_d = useResponsiveValue(wrapProp)) != null ? _d : true;
-  const orientation = (_e = useResponsiveValue(orientationProp)) != null ? _e : "horizontal";
-  const classNames = clsx(
-    className,
-    GlobalButtonGroupCssSelector,
-    cssModule(
-      ButtonGroup_module_default,
-      "hop-ButtonGroup",
-      size,
-      align,
-      fluid && "fluid",
-      wrap && "wrap",
-      orientation
-    ),
-    stylingProps.className
-  );
-  const style = {
-    ...stylingProps.style,
-    ...styleProp
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...filterDOMProps(otherProps, { labelable: true }),
-      ref,
-      className: classNames,
-      style,
-      slot: props.slot || void 0,
-      children: /* @__PURE__ */ jsx(
-        SlotProvider,
-        {
-          values: [[
-            ButtonContext,
-            {
-              size,
-              isDisabled,
-              fluid
-            }
-          ]],
-          children
-        }
-      )
-    }
-  );
-}
-var _ButtonGroup = forwardRef(ButtonGroup);
-_ButtonGroup.displayName = "ButtonGroup";
-
-export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector };
+export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector } from '../../chunk-BAKCRZAG.js';
+import '../../chunk-VJQ7M2BK.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/ButtonGroupContext.js

@@ -1,2 +1,2 @@
 export { ButtonGroupContext } from '../../chunk-VJQ7M2BK.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/ClearButton.css

@@ -1,33 +1,37 @@
-/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ClearButton.module.css/#css-module-data */
-.ClearButton-module__hop-ClearButton___WVyiZ {
-  --hop-ClearButton-border-radius: var(--hop-shape-rounded-sm);
-  --hop-ClearButton-focus-ring-color: var(--hop-primary-border-focus);
-  --hop-ClearButton-color: var(--hop-neutral-icon-weak);
-  --hop-ClearButton-color-hover: var(--hop-neutral-icon-weak-hover);
-  --hop-ClearButton-color-pressed: var(--hop-neutral-icon-weak-press);
-  --hop-ClearButton-color-disabled: var(--hop-neutral-icon-disabled);
-  --hop-ClearButton-background-color: transparent;
-  --hop-ClearButton-background-color-hover: var(--hop-neutral-surface-hover);
-  --hop-ClearButton-background-color-pressed: var(--hop-neutral-surface-press);
-  --hop-ClearButton-background-color-disabled: transparent;
-  --hop-ClearButton-spinner-color: var(--hop-neutral-icon);
-  --hop-ClearButton-height: 1rem;
-  --hop-ClearButton-width: 1rem;
-  --inline-size: var(--hop-ClearButton-width);
-  --block-size: var(--hop-ClearButton-height);
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR {
+  --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
+  --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
+  --hop-EmbeddedButton-color: var(--hop-neutral-icon-weak);
+  --hop-EmbeddedButton-color-hover: var(--hop-neutral-icon-weak-hover);
+  --hop-EmbeddedButton-color-pressed: var(--hop-neutral-icon-weak-press);
+  --hop-EmbeddedButton-color-disabled: var(--hop-neutral-icon-disabled);
+  --hop-EmbeddedButton-effect-background-color: transparent;
+  --hop-EmbeddedButton-effect-background-color-hover: var(--hop-neutral-surface-weak-hover);
+  --hop-EmbeddedButton-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
+  --hop-EmbeddedButton-effect-background-color-disabled: transparent;
+  --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
+  --hop-EmbeddedButton-md-height: 1.5rem;
+  --hop-EmbeddedButton-md-width: 1.5rem;
+  --hop-EmbeddedButton-md-effect-height: 1rem;
+  --hop-EmbeddedButton-md-effect-width: 1rem;
+  --hop-EmbeddedButton-lg-height: 1.5rem;
+  --hop-EmbeddedButton-lg-width: 1.5rem;
+  --hop-EmbeddedButton-lg-effect-height: 1.5rem;
+  --hop-EmbeddedButton-lg-effect-width: 1.5rem;
   --spinner: var(--hop-primary-icon-strong);
   --padding-inline: 0;
   --padding-block: 0;
-  --background-color: var(--hop-ClearButton-background-color);
-  --color: var(--hop-ClearButton-color);
-  --border: var(--hop-ClearButton-border);
-  --spinner-color: var(--hop-ClearButton-spinner-color);
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color);
+  --color: var(--hop-EmbeddedButton-color);
   --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
+  --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
+  --focus-ring-size: 0.125rem;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   display: flex;
-  column-gap: var(--hop-space-inline-xs);
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
@@ -38,29 +42,61 @@
   color: var(--color);
   text-decoration: none;
   white-space: nowrap;
-  background-color: var(--background-color);
+  background: none;
   border: none;
-  border-radius: var(--hop-ClearButton-border-radius);
+  border-radius: var(--hop-EmbeddedButton-border-radius);
   outline: none;
-  transition: color var(--transition), background-color var(--transition);
+  transition: color var(--transition);
 }
-.ClearButton-module__hop-ClearButton___WVyiZ[data-focus-visible] {
-  outline: 0.125rem solid var(--hop-ClearButton-focus-ring-color);
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  inline-size: var(--effect-inline-size);
+  block-size: var(--effect-block-size);
+  background-color: var(--effect-background-color);
+  border-radius: var(--effect-border-radius);
+  transition: background-color var(--transition);
 }
-.ClearButton-module__hop-ClearButton___WVyiZ[data-disabled] {
-  --background-color: var(--hop-ClearButton-background-color-disabled);
-  --color: var(--hop-ClearButton-color-disabled);
-  --border: var(--hop-ClearButton-border-disabled);
+.EmbeddedButton-module__hop-EmbeddedButton--md___uix0V {
+  --inline-size: var(--hop-EmbeddedButton-md-width);
+  --block-size: var(--hop-EmbeddedButton-md-height);
+  --focus-ring-offset: calc(-1 * var(--focus-ring-size));
+}
+.EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d {
+  --inline-size: var(--hop-EmbeddedButton-lg-width);
+  --block-size: var(--hop-EmbeddedButton-lg-height);
+  --focus-ring-offset: 0;
+}
+.EmbeddedButton-module__hop-EmbeddedButton--md___uix0V::before {
+  --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
+  --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
+}
+.EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d::before {
+  --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
+  --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible] {
+  outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-disabled] {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-disabled);
+  --color: var(--hop-EmbeddedButton-color-disabled);
   cursor: not-allowed;
 }
-.ClearButton-module__hop-ClearButton___WVyiZ[data-hovered]:not([data-disabled]),
-.ClearButton-module__hop-ClearButton___WVyiZ[data-focus-visible]:not([data-disabled]) {
-  --background-color: var(--hop-ClearButton-background-color-hover);
-  --color: var(--hop-ClearButton-color-hover);
-  --border: var(--hop-ClearButton-border-hover);
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-hovered]:not([data-disabled], [data-pressed]),
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible]:not([data-disabled], [data-pressed]) {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-hover);
+  --color: var(--hop-EmbeddedButton-color-hover);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-pressed]:not([data-disabled]) {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-pressed);
+  --color: var(--hop-EmbeddedButton-color-pressed);
 }
-.ClearButton-module__hop-ClearButton___WVyiZ[data-pressed] {
-  --background-color: var(--hop-ClearButton-background-color-pressed);
-  --color: var(--hop-ClearButton-color-pressed);
-  --border: var(--hop-ClearButton-border-pressed);
+.EmbeddedButton-module__hop-EmbeddedButton__icon___pPbur {
+  position: relative;
 }

package/dist/buttons/src/ClearButton.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
-import { StyledComponentProps } from '@hopper-ui/styled-system';
-import { ButtonProps } from 'react-aria-components';
+import { EmbeddedButtonProps } from './EmbeddedButton.js';
+import '@hopper-ui/styled-system';
+import 'react-aria-components';
 
 declare const GlobalClearButtonCssSelector = "hop-ClearButton";
-interface ClearButtonProps extends StyledComponentProps<Omit<ButtonProps, "children">> {
+interface ClearButtonProps extends EmbeddedButtonProps {
 }
 /**
  * ClearButtons are used to initialize an action. ClearButton labels express what action will occur when the user interacts with it.

package/dist/buttons/src/ClearButton.js

@@ -1,6 +1,9 @@
-export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from '../../chunk-DBTHMTO4.js';
-import '../../chunk-LL2FMAAO.js';
+export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from '../../chunk-UARL5M2W.js';
 import '../../chunk-DXVKHP4V.js';
+import '../../chunk-LYV2D5RZ.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-H6CDFWVR.js';
 import '../../chunk-65JPI4FL.js';
 import '../../chunk-KVDXQMWI.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/ClearButtonContext.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ContextValue } from 'react-aria-components';
 import { ClearButtonProps } from './ClearButton.js';
+import './EmbeddedButton.js';
 import '@hopper-ui/styled-system';
 
 declare const ClearButtonContext: react.Context<ContextValue<ClearButtonProps, HTMLButtonElement>>;

package/dist/buttons/src/ClearButtonContext.js

@@ -1,2 +1,2 @@
 export { ClearButtonContext } from '../../chunk-DXVKHP4V.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/EmbeddedButton.css

@@ -0,0 +1,102 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR {
+  --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
+  --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
+  --hop-EmbeddedButton-color: var(--hop-neutral-icon-weak);
+  --hop-EmbeddedButton-color-hover: var(--hop-neutral-icon-weak-hover);
+  --hop-EmbeddedButton-color-pressed: var(--hop-neutral-icon-weak-press);
+  --hop-EmbeddedButton-color-disabled: var(--hop-neutral-icon-disabled);
+  --hop-EmbeddedButton-effect-background-color: transparent;
+  --hop-EmbeddedButton-effect-background-color-hover: var(--hop-neutral-surface-weak-hover);
+  --hop-EmbeddedButton-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
+  --hop-EmbeddedButton-effect-background-color-disabled: transparent;
+  --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
+  --hop-EmbeddedButton-md-height: 1.5rem;
+  --hop-EmbeddedButton-md-width: 1.5rem;
+  --hop-EmbeddedButton-md-effect-height: 1rem;
+  --hop-EmbeddedButton-md-effect-width: 1rem;
+  --hop-EmbeddedButton-lg-height: 1.5rem;
+  --hop-EmbeddedButton-lg-width: 1.5rem;
+  --hop-EmbeddedButton-lg-effect-height: 1.5rem;
+  --hop-EmbeddedButton-lg-effect-width: 1.5rem;
+  --spinner: var(--hop-primary-icon-strong);
+  --padding-inline: 0;
+  --padding-block: 0;
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color);
+  --color: var(--hop-EmbeddedButton-color);
+  --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
+  --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
+  --focus-ring-size: 0.125rem;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--inline-size);
+  block-size: var(--block-size);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  color: var(--color);
+  text-decoration: none;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  border-radius: var(--hop-EmbeddedButton-border-radius);
+  outline: none;
+  transition: color var(--transition);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  inline-size: var(--effect-inline-size);
+  block-size: var(--effect-block-size);
+  background-color: var(--effect-background-color);
+  border-radius: var(--effect-border-radius);
+  transition: background-color var(--transition);
+}
+.EmbeddedButton-module__hop-EmbeddedButton--md___uix0V {
+  --inline-size: var(--hop-EmbeddedButton-md-width);
+  --block-size: var(--hop-EmbeddedButton-md-height);
+  --focus-ring-offset: calc(-1 * var(--focus-ring-size));
+}
+.EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d {
+  --inline-size: var(--hop-EmbeddedButton-lg-width);
+  --block-size: var(--hop-EmbeddedButton-lg-height);
+  --focus-ring-offset: 0;
+}
+.EmbeddedButton-module__hop-EmbeddedButton--md___uix0V::before {
+  --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
+  --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
+}
+.EmbeddedButton-module__hop-EmbeddedButton--lg___8U58d::before {
+  --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
+  --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible] {
+  outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-disabled] {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-disabled);
+  --color: var(--hop-EmbeddedButton-color-disabled);
+  cursor: not-allowed;
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-hovered]:not([data-disabled], [data-pressed]),
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-focus-visible]:not([data-disabled], [data-pressed]) {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-hover);
+  --color: var(--hop-EmbeddedButton-color-hover);
+}
+.EmbeddedButton-module__hop-EmbeddedButton___1uONR[data-pressed]:not([data-disabled]) {
+  --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-pressed);
+  --color: var(--hop-EmbeddedButton-color-pressed);
+}
+.EmbeddedButton-module__hop-EmbeddedButton__icon___pPbur {
+  position: relative;
+}

package/dist/buttons/src/EmbeddedButton.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { ButtonProps } from 'react-aria-components';
+
+declare const GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
+interface EmbeddedButtonProps extends StyledComponentProps<ButtonProps> {
+    /**
+     * The size of the EmbeddedButton.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"md" | "lg">;
+}
+/**
+ * EmbeddedButtons are buttons embedded within other components, such as inputs and tags.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _EmbeddedButton: react.ForwardRefExoticComponent<EmbeddedButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { _EmbeddedButton as EmbeddedButton, type EmbeddedButtonProps, GlobalEmbeddedButtonCssSelector };

package/dist/buttons/src/EmbeddedButton.js

@@ -0,0 +1,6 @@
+export { _EmbeddedButton as EmbeddedButton, GlobalEmbeddedButtonCssSelector } from '../../chunk-LYV2D5RZ.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/buttons/src/EmbeddedButtonContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { EmbeddedButtonProps } from './EmbeddedButton.js';
+import '@hopper-ui/styled-system';
+
+declare const EmbeddedButtonContext: react.Context<ContextValue<EmbeddedButtonProps, HTMLButtonElement>>;
+
+export { EmbeddedButtonContext };

package/dist/buttons/src/EmbeddedButtonContext.js

@@ -0,0 +1,2 @@
+export { EmbeddedButtonContext } from '../../chunk-O7IJYNVQ.js';
+import '../../chunk-2P3A4VVY.js';