@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/button/Button.tsx","../../src/button/ClearButton.tsx","../../src/button/FieldButton.tsx","../../src/button/LogicButton.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  type JSX,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  Button as HeadlessButton,\n  type ButtonRenderProps,\n  DialogTriggerContext,\n  PopoverTriggerContext,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { ButtonFillStyle, ButtonProps, ButtonSize, ButtonVariant } from \"./types\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { s2IntlStrings } from \"../intl\";\nimport { useProviderProps } from \"../provider\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  s2Button,\n  s2ButtonPendingIndicator,\n  s2ButtonText,\n  type S2ButtonRenderState,\n} from \"./s2-button-styles\";\nimport { createPendingState } from \"./pending-state\";\nimport { S2PendingProgressCircle } from \"./S2PendingProgressCircle\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { SkeletonContext } from \"../skeleton\";\nimport { TextContext } from \"../text\";\nimport { useFormProps } from \"../form\";\nimport { useButtonContext } from \"./context\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"./spectrum-context\";\nimport { getSingleTextChild } from \"./text-child\";\n\ntype RuntimeButtonProps = ButtonProps & {\n  onHoverChange?: (isHovered: boolean) => void;\n};\n\nexport function Button(props: ButtonProps): JSX.Element {\n  const runtimeProps = props as RuntimeButtonProps;\n  const providerProps = useProviderProps(useFormProps(runtimeProps));\n  const contextProps = getSlottedContextProps(useButtonContext(), runtimeProps.slot);\n  const defaultProps: Partial<ButtonProps> = {\n    variant: \"primary\",\n    size: \"M\",\n    fillStyle: \"fill\",\n  };\n\n  const merged = useFormProps(\n    mergeProps(defaultProps, providerProps, contextProps ?? {}, runtimeProps),\n  );\n\n  const [local, headlessProps] = splitProps(merged, [\n    \"variant\",\n    \"fillStyle\",\n    \"size\",\n    \"staticColor\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"children\",\n    \"ref\",\n    \"isPending\",\n    \"onPress\",\n    \"onPressChange\",\n    \"onHoverChange\",\n  ]);\n\n  const { isProgressVisible } = createPendingState(() => local.isPending);\n  const dialogTriggerContext = useContext(DialogTriggerContext);\n  const popoverTriggerContext = useContext(PopoverTriggerContext);\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, runtimeProps.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, runtimeProps.UNSAFE_style);\n  let buttonElement: HTMLButtonElement | undefined;\n  const assignButtonRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    runtimeProps.ref,\n  );\n\n  const variant = (): ButtonVariant => local.variant ?? \"primary\";\n  const fillStyle = (): ButtonFillStyle => local.fillStyle ?? \"fill\";\n  const size = (): ButtonSize => local.size ?? \"M\";\n  const isStaticColor = () => !!local.staticColor;\n  const isOverlayTriggerOpen = () =>\n    !!buttonElement &&\n    ((dialogTriggerContext?.triggerRef() === buttonElement &&\n      dialogTriggerContext.state.isOpen()) ||\n      (popoverTriggerContext?.triggerRef() === buttonElement &&\n        popoverTriggerContext.state.isOpen()));\n  const pendingLabel = () => stringFormatter().format(\"button.pending\");\n\n  const getS2State = (renderProps: ButtonRenderProps): S2ButtonRenderState => ({\n    isHovered: renderProps.isHovered || isOverlayTriggerOpen(),\n    isPressed: renderProps.isPressed,\n    isFocused: renderProps.isFocused,\n    isFocusVisible: renderProps.isFocusVisible,\n    isDisabled: renderProps.isDisabled || isProgressVisible(),\n    isPending: local.isPending,\n  });\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      s2Button(\n        {\n          ...getS2State(renderProps),\n          variant: variant(),\n          fillStyle: fillStyle(),\n          size: size(),\n          staticColor: local.staticColor,\n          isStaticColor: isStaticColor(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getPressScaleStyle = (renderProps: ButtonRenderProps): JSX.CSSProperties => {\n    return pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);\n  };\n\n  function ButtonContent() {\n    const iconContextValue = {\n      render: centerBaseline({\n        slot: \"icon\",\n        styles: () =>\n          style({\n            order: 0,\n          }),\n      }),\n      styles: () =>\n        style({\n          /* fontRelative(16), not Spectrum's fontRelative(20): S2's default sizes a\n           * button icon to its 20px workflow-icon grid, which on this register's 15px\n           * control font renders ~21px — larger than the label and larger than anything\n           * the handoff draws. The register's own PixelIcon default is 17px\n           * (primitives.tsx:55); fontRelative(16) lands ~17px at the 15px control font,\n           * matching that default. Scales with the size prop the same way 20 did. */\n          size: fontRelative(16),\n          marginStart: \"--iconMargin\",\n          flexShrink: 0,\n          visibility: {\n            isProgressVisible: \"hidden\",\n          },\n        })({ isProgressVisible: isProgressVisible() }),\n    };\n    const textContextValue = {\n      styles: () => s2ButtonText({ isProgressVisible: isProgressVisible() }),\n      \"data-rsp-slot\": \"text\",\n    };\n\n    function ResolvedContent() {\n      const resolvedChildren = resolveChildren(() => local.children);\n      const content = () => resolvedChildren();\n      const textChild = () => getSingleTextChild(content());\n\n      return textChild() !== undefined ? (\n        <span\n          class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })} ${style({ order: 1 })}`}\n          data-rsp-slot=\"text\"\n        >\n          {textChild()}\n        </span>\n      ) : (\n        content()\n      );\n    }\n\n    return (\n      <>\n        <SkeletonContext.Provider value={null}>\n          <TextContext.Provider value={textContextValue}>\n            <IconContext.Provider value={iconContextValue}>\n              <ResolvedContent />\n              {local.isPending ? (\n                <div\n                  class={s2ButtonPendingIndicator({\n                    isPending: local.isPending,\n                    isProgressVisible: isProgressVisible(),\n                  })}\n                >\n                  <S2PendingProgressCircle\n                    aria-label={pendingLabel()}\n                    size={size()}\n                    staticColor={local.staticColor}\n                  />\n                </div>\n              ) : null}\n            </IconContext.Provider>\n          </TextContext.Provider>\n        </SkeletonContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessButton\n      {...headlessProps}\n      isPending={local.isPending}\n      isPendingFocusable\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n        assignButtonRefs(element);\n      }}\n      onHoverChange={(hovered) => {\n        local.onHoverChange?.(hovered);\n      }}\n      onPressChange={(pressed) => {\n        local.onPressChange?.(pressed);\n      }}\n      onPress={(event) => {\n        if (!local.isPending) {\n          local.onPress?.(event);\n        }\n      }}\n      class={getClassName}\n      style={getPressScaleStyle}\n    >\n      <ButtonContent />\n    </HeadlessButton>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport {\n  Button as HeadlessButton,\n  type ButtonProps as HeadlessButtonProps,\n  type ButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport CrossIcon from \"../icon/ui-icons/Cross\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\n\nexport type ClearButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ClearButtonProps extends Omit<\n  HeadlessButtonProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the button. @default 'md' */\n  size?: ClearButtonSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nconst iconSizes: Record<ClearButtonSize, JSX.CSSProperties> = {\n  sm: { width: \"0.75rem\", height: \"0.75rem\" },\n  md: { width: \"1rem\", height: \"1rem\" },\n  lg: { width: \"1.25rem\", height: \"1.25rem\" },\n};\n\n// Icon-only dismiss button. The state ramp is driven by the button's render\n// props (isHovered/isPressed/isDisabled/isFocusVisible) fed to the style()\n// macro: a subdued neutral glyph that strengthens on hover/press over a faint\n// gray fill, plus the S2 focus ring. Emitted through the macro so the CSS ships\n// in the package bundle for installed consumers.\nconst clearButtonStyles = style<{\n  size: ClearButtonSize;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderStyle: \"none\",\n  borderRadius: \"full\",\n  cursor: \"default\",\n  transition: \"default\",\n  width: { size: { sm: 20, md: 24, lg: 32 } },\n  height: { size: { sm: 20, md: 24, lg: 32 } },\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: \"gray-100\",\n    isPressed: \"gray-200\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isPressed: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * An icon-only clear/dismiss button, typically used in search fields and tags.\n */\nexport function ClearButton(props: ClearButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"size\", \"class\"]);\n  const size = () => local.size ?? \"md\";\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      clearButtonStyles({\n        size: size(),\n        isHovered: renderProps.isHovered,\n        isPressed: renderProps.isPressed,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessButton\n      {...headlessProps}\n      aria-label={headlessProps[\"aria-label\"] ?? \"Clear\"}\n      class={getClassName}\n    >\n      <IconContext.Provider value={{ slot: \"icon\", render: centerBaseline({ slot: \"icon\" }) }}>\n        <CrossIcon style={iconSizes[size()]} />\n      </IconContext.Provider>\n    </HeadlessButton>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport {\n  Button as HeadlessButton,\n  type ButtonProps as HeadlessButtonProps,\n  type ButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\n\nexport interface FieldButtonProps extends Omit<HeadlessButtonProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A trailing button that sits inside an input field, sharing the field's\n// right-hand corners and a gray-300 divider on its inner edge. The neutral fill\n// ramps on hover/press via the render-prop conditions fed to the style() macro,\n// so the CSS ships in the package bundle for installed consumers.\nconst fieldButtonStyles = style<{\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  outlineOffset: -2,\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  paddingX: 8,\n  borderStyle: \"solid\",\n  borderWidth: 0,\n  borderStartWidth: 1,\n  borderColor: \"gray-300\",\n  borderTopEndRadius: \"sm\",\n  borderBottomEndRadius: \"sm\",\n  cursor: \"default\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"gray-100\",\n    isHovered: \"gray-200\",\n    isPressed: \"gray-200\",\n    isDisabled: \"gray-100\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isPressed: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * A button designed to sit inside an input field.\n */\nexport function FieldButton(props: FieldButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      fieldButtonStyles({\n        isHovered: renderProps.isHovered,\n        isPressed: renderProps.isPressed,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return <HeadlessButton {...headlessProps} class={getClassName} />;\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport {\n  ToggleButton as HeadlessToggleButton,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\n\nexport interface LogicButtonProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A compact AND/OR toggle: an accent fill with white text when selected, a\n// bordered neutral chip when not, plus the S2 focus ring. Selection/disabled are\n// driven by the render-prop conditions fed to the style() macro so the CSS ships\n// in the package bundle for installed consumers.\nconst logicButtonStyles = style<{\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  paddingX: 8,\n  paddingY: 2,\n  minWidth: 48,\n  font: \"ui-xs\",\n  fontWeight: \"bold\",\n  borderRadius: \"sm\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  cursor: \"default\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"gray-100\",\n    isSelected: \"accent-900\",\n    isDisabled: \"gray-100\",\n  },\n  borderColor: {\n    default: \"gray-300\",\n    isSelected: \"transparent\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isSelected: \"white\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * An AND/OR logic toggle button. Displays \"AND\" when selected (default), \"OR\" when not.\n */\nexport function LogicButton(props: LogicButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      logicButtonStyles({\n        isSelected: renderProps.isSelected,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButton {...headlessProps} class={getClassName}>\n      {(renderProps: ToggleButtonRenderProps) => (\n        <span>{renderProps.isSelected ? \"AND\" : \"OR\"}</span>\n      )}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/button/Button.tsx","../../src/button/ClearButton.tsx","../../src/button/FieldButton.tsx","../../src/button/LogicButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx\n\n// Port of packages/@react-spectrum/s2/src/Button.tsx.\n\nimport { createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Button as HeadlessButton,\n  type ButtonRenderProps,\n  DialogTriggerContext,\n  PopoverTriggerContext,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { ButtonFillStyle, ButtonProps, ButtonSize, ButtonVariant } from \"./types\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { s2IntlStrings } from \"../intl\";\nimport { useProviderProps, type ProviderInheritedProps } from \"../provider\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  s2Button,\n  s2ButtonPendingIndicator,\n  s2ButtonText,\n  type S2ButtonRenderState,\n} from \"./s2-button-styles\";\nimport { createPendingState } from \"./pending-state\";\nimport { S2PendingProgressCircle } from \"./S2PendingProgressCircle\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { SkeletonContext } from \"../skeleton\";\nimport { TextContext } from \"../text\";\nimport { useFormProps } from \"../form\";\nimport { useButtonContext } from \"./context\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"./spectrum-context\";\nimport { getSingleTextChild } from \"./text-child\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype RuntimeButtonProps = ButtonProps & {\n  onHoverChange?: (isHovered: boolean) => void;\n};\n\nexport function Button(props: ButtonProps): JSX.Element {\n  const runtimeProps = props as RuntimeButtonProps;\n  const providerProps = useProviderProps(useFormProps(runtimeProps)) as RuntimeButtonProps &\n    ProviderInheritedProps;\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useButtonContext(), runtimeProps.slot);\n  // Upstream: context, then the Form fills what is still unset, then the\n  // defaults at read time. A default merged in first would hide the Form's size.\n  const merged = useFormProps(\n    mergeProps<RuntimeButtonProps>(flags, contextProps ?? {}, runtimeProps),\n  );\n\n  const [local, headlessProps] = splitProps(merged, [\n    \"variant\",\n    \"fillStyle\",\n    \"size\",\n    \"staticColor\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"children\",\n    \"ref\",\n    \"isPending\",\n    \"onPress\",\n    \"onPressChange\",\n    \"onHoverChange\",\n  ]);\n\n  const { isProgressVisible } = createPendingState(() => local.isPending);\n  const dialogTriggerContext = useContext(DialogTriggerContext);\n  const popoverTriggerContext = useContext(PopoverTriggerContext);\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, runtimeProps.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, runtimeProps.UNSAFE_style);\n  let buttonElement: HTMLButtonElement | undefined;\n  const assignButtonRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    runtimeProps.ref,\n  );\n\n  const variant = (): ButtonVariant => local.variant ?? \"primary\";\n  const fillStyle = (): ButtonFillStyle => local.fillStyle ?? \"fill\";\n  const size = (): ButtonSize => local.size ?? \"M\";\n  const isStaticColor = () => !!local.staticColor;\n  const isOverlayTriggerOpen = () =>\n    !!buttonElement &&\n    ((dialogTriggerContext?.triggerRef() === buttonElement &&\n      dialogTriggerContext.state.isOpen()) ||\n      (popoverTriggerContext?.triggerRef() === buttonElement &&\n        popoverTriggerContext.state.isOpen()));\n  const pendingLabel = () => stringFormatter().format(\"button.pending\");\n\n  const getS2State = (renderProps: ButtonRenderProps): S2ButtonRenderState => ({\n    isHovered: renderProps.isHovered || isOverlayTriggerOpen(),\n    isPressed: renderProps.isPressed,\n    isFocused: renderProps.isFocused,\n    isFocusVisible: renderProps.isFocusVisible,\n    isDisabled: renderProps.isDisabled || isProgressVisible(),\n    isPending: local.isPending,\n  });\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      s2Button(\n        {\n          ...getS2State(renderProps),\n          variant: variant(),\n          fillStyle: fillStyle(),\n          size: size(),\n          staticColor: local.staticColor,\n          isStaticColor: isStaticColor(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getPressScaleStyle = (renderProps: ButtonRenderProps): JSX.CSSProperties => {\n    return pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);\n  };\n\n  function ButtonContent() {\n    const iconContextValue = {\n      render: centerBaseline({\n        slot: \"icon\",\n        styles: () =>\n          style({\n            order: 0,\n            visibility: {\n              isProgressVisible: \"hidden\",\n            },\n          })({ isProgressVisible: isProgressVisible() }),\n      }),\n      styles: () =>\n        style({\n          /* fontRelative(16), not Spectrum's fontRelative(20): S2's default sizes a\n           * button icon to its 20px workflow-icon grid, which on this theme's 15px\n           * control font renders ~21px — larger than the label and larger than anything\n           * the handoff draws. The theme's own PixelIcon default is 17px\n           * (primitives.tsx:55); fontRelative(16) lands ~17px at the 15px control font,\n           * matching that default. Scales with the size prop the same way 20 did. */\n          size: fontRelative(16),\n          marginStart: \"--iconMargin\",\n          flexShrink: 0,\n        }),\n    };\n    const textContextValue = {\n      styles: () => s2ButtonText({ isProgressVisible: isProgressVisible() }),\n      \"data-rsp-slot\": \"text\",\n    };\n\n    function ResolvedContent() {\n      // Cache the authored child value without recursively resolving dynamic members.\n      // Solid's children() helper turns mixed text into a snapshot that goes stale\n      // when this branch is hydrated.\n      const content = createMemo(() => local.children);\n      const textChild = () => getSingleTextChild(content());\n\n      return (\n        <>\n          {textChild() !== undefined ? (\n            <span\n              class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })} ${style({ order: 1 })}`}\n              data-rsp-slot=\"text\"\n            >\n              {textChild()}\n            </span>\n          ) : (\n            content()\n          )}\n        </>\n      );\n    }\n\n    return (\n      <>\n        <SkeletonContext value={null}>\n          <TextContext value={textContextValue}>\n            <IconContext value={iconContextValue}>\n              <ResolvedContent />\n              {local.isPending ? (\n                <div\n                  class={s2ButtonPendingIndicator({\n                    isPending: local.isPending,\n                    isProgressVisible: isProgressVisible(),\n                  })}\n                >\n                  <S2PendingProgressCircle\n                    aria-label={pendingLabel()}\n                    size={size()}\n                    staticColor={local.staticColor}\n                  />\n                </div>\n              ) : null}\n            </IconContext>\n          </TextContext>\n        </SkeletonContext>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessButton\n      {...headlessProps}\n      isPending={local.isPending}\n      isPendingFocusable\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n        assignButtonRefs(element);\n      }}\n      onHoverChange={(hovered) => {\n        local.onHoverChange?.(hovered);\n      }}\n      onPressChange={(pressed) => {\n        local.onPressChange?.(pressed);\n      }}\n      onPress={local.onPress}\n      class={getClassName}\n      style={getPressScaleStyle}\n    >\n      <ButtonContent />\n    </HeadlessButton>\n  );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ClearButton.tsx\n\n// Port of packages/@react-spectrum/s2/src/ClearButton.tsx.\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Button as HeadlessButton,\n  type ButtonProps as HeadlessButtonProps,\n  type ButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport CrossIcon from \"../icon/ui-icons/Cross\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type ClearButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ClearButtonProps extends Omit<\n  HeadlessButtonProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the button. @default 'md' */\n  size?: ClearButtonSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nconst iconSizes: Record<ClearButtonSize, JSX.CSSProperties> = {\n  sm: { width: \"0.75rem\", height: \"0.75rem\" },\n  md: { width: \"1rem\", height: \"1rem\" },\n  lg: { width: \"1.25rem\", height: \"1.25rem\" },\n};\n\n// Icon-only dismiss button. The state ramp is driven by the button's render\n// props (isHovered/isPressed/isDisabled/isFocusVisible) fed to the style()\n// macro: a subdued neutral glyph that strengthens on hover/press over a faint\n// gray fill, plus the S2 focus ring. Emitted through the macro so the CSS ships\n// in the package bundle for installed consumers.\nconst clearButtonStyles = style<{\n  size: ClearButtonSize;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderStyle: \"none\",\n  borderRadius: \"full\",\n  cursor: \"default\",\n  transition: \"default\",\n  width: { size: { sm: 20, md: 24, lg: 32 } },\n  height: { size: { sm: 20, md: 24, lg: 32 } },\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: \"gray-100\",\n    isPressed: \"gray-200\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isPressed: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * An icon-only clear/dismiss button, typically used in search fields and tags.\n */\nexport function ClearButton(props: ClearButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"size\", \"class\"]);\n  const size = () => local.size ?? \"md\";\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      clearButtonStyles({\n        size: size(),\n        isHovered: renderProps.isHovered,\n        isPressed: renderProps.isPressed,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessButton\n      {...headlessProps}\n      aria-label={headlessProps[\"aria-label\"] ?? \"Clear\"}\n      class={getClassName}\n    >\n      <IconContext value={{ slot: \"icon\", render: centerBaseline({ slot: \"icon\" }) }}>\n        <CrossIcon style={iconSizes[size()]} />\n      </IconContext>\n    </HeadlessButton>\n  );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/button/FieldButton.tsx\n\n// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/button/FieldButton.tsx.\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Button as HeadlessButton,\n  type ButtonProps as HeadlessButtonProps,\n  type ButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface FieldButtonProps extends Omit<HeadlessButtonProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A trailing button that sits inside an input field, sharing the field's\n// right-hand corners and a gray-300 divider on its inner edge. The neutral fill\n// ramps on hover/press via the render-prop conditions fed to the style() macro,\n// so the CSS ships in the package bundle for installed consumers.\nconst fieldButtonStyles = style<{\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  outlineOffset: -2,\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  paddingX: 8,\n  borderStyle: \"solid\",\n  borderWidth: 0,\n  borderStartWidth: 1,\n  borderColor: \"gray-300\",\n  borderTopEndRadius: \"sm\",\n  borderBottomEndRadius: \"sm\",\n  cursor: \"default\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"gray-100\",\n    isHovered: \"gray-200\",\n    isPressed: \"gray-200\",\n    isDisabled: \"gray-100\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isPressed: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * A button designed to sit inside an input field.\n */\nexport function FieldButton(props: FieldButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n\n  const getClassName = (renderProps: ButtonRenderProps): string =>\n    [\n      fieldButtonStyles({\n        isHovered: renderProps.isHovered,\n        isPressed: renderProps.isPressed,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return <HeadlessButton {...headlessProps} class={getClassName} />;\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/button/LogicButton.tsx\n\n// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/button/LogicButton.tsx.\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  ToggleButton as HeadlessToggleButton,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface LogicButtonProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A compact AND/OR toggle: an accent fill with white text when selected, a\n// bordered neutral chip when not, plus the S2 focus ring. Selection/disabled are\n// driven by the render-prop conditions fed to the style() macro so the CSS ships\n// in the package bundle for installed consumers.\nconst logicButtonStyles = style<{\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n}>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  paddingX: 8,\n  paddingY: 2,\n  minWidth: 48,\n  font: \"ui-xs\",\n  fontWeight: \"bold\",\n  borderRadius: \"sm\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  cursor: \"default\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"gray-100\",\n    isSelected: \"accent-900\",\n    isDisabled: \"gray-100\",\n  },\n  borderColor: {\n    default: \"gray-300\",\n    isSelected: \"transparent\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isSelected: \"white\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * An AND/OR logic toggle button. Displays \"AND\" when selected (default), \"OR\" when not.\n */\nexport function LogicButton(props: LogicButtonProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      logicButtonStyles({\n        isSelected: renderProps.isSelected,\n        isDisabled: renderProps.isDisabled,\n        isFocusVisible: renderProps.isFocusVisible,\n      }),\n      local.class,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButton {...headlessProps} class={getClassName}>\n      {(renderProps: ToggleButtonRenderProps) => (\n        <span>{renderProps.isSelected ? \"AND\" : \"OR\"}</span>\n      )}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}

package/dist/_chunk/button.jsx

@@ -1,30 +1,84 @@
-import { useProviderProps } from "../provider/index.jsx";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ClearButton.tsx
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/button/FieldButton.tsx
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/button/LogicButton.tsx
+import { a as useProviderProps } from "./provider.jsx";
 import { o as useButtonContext } from "./context.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
 import { t as s2IntlStrings } from "./intl.jsx";
+import { SkeletonContext } from "../skeleton/index.jsx";
+import { i as useFormProps } from "./form.jsx";
 import { centerBaseline } from "../icon/center-baseline.jsx";
 import { n as S2PendingProgressCircle, r as createPendingState } from "./ActionButton.jsx";
 import { pressScale } from "../pressScale.jsx";
-import { SkeletonContext } from "../skeleton/index.jsx";
 import { t as IconContext } from "./spectrum-icon.jsx";
-import { c as TextContext } from "./text.jsx";
+import { c as TextContext$1 } from "./text.jsx";
 import { t as getSingleTextChild } from "./text-child.jsx";
 import { i as s2ButtonText, n as s2Button, r as s2ButtonPendingIndicator } from "./LinkButton.jsx";
-import { i as useFormProps } from "./form.jsx";
 import { t as Cross } from "./Cross.jsx";
-import { children, mergeProps, splitProps, useContext } from "solid-js";
-import { createStringFormatter } from "@proyecto-viviana/solidaria";
+import { createMemo, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Button, DialogTriggerContext, PopoverTriggerContext, ToggleButton } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
 //#region src/button/Button.tsx
 function Button$1(props) {
 	const runtimeProps = props;
 	const providerProps = useProviderProps(useFormProps(runtimeProps));
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useButtonContext(), runtimeProps.slot);
-	const [local, headlessProps] = splitProps(useFormProps(mergeProps({
-		variant: "primary",
-		size: "M",
-		fillStyle: "fill"
-	}, providerProps, contextProps ?? {}, runtimeProps)), [
+	const merged = useFormProps(mergeProps$1(flags, contextProps ?? {}, runtimeProps));
+	const [local, headlessProps] = splitProps(merged, [
 		"variant",
 		"fillStyle",
 		"size",
@@ -76,34 +130,32 @@ function Button$1(props) {
 		const iconContextValue = {
 			render: centerBaseline({
 				slot: "icon",
-				styles: () => " _Ja151"
+				styles: () => function anonymous(props) {
+					let rules = " ";
+					rules += " _Ja17";
+					if (props.isProgressVisible) rules += " _6b17";
+					return rules;
+				}({ isProgressVisible: isProgressVisible() })
 			}),
-			styles: () => function anonymous(props) {
-				let rules = " ";
-				rules += " ZXJkxGe151";
-				rules += " FXJkxGe151";
-				rules += " I67logd151";
-				rules += " _va151";
-				if (props.isProgressVisible) rules += " _6b151";
-				return rules;
-			}({ isProgressVisible: isProgressVisible() })
+			styles: () => " ZXJkxGe17 FXJkxGe17 I67logd17 _va17"
 		};
 		const textContextValue = {
 			styles: () => s2ButtonText({ isProgressVisible: isProgressVisible() }),
 			"data-rsp-slot": "text"
 		};
 		function ResolvedContent() {
-			const resolvedChildren = children(() => local.children);
-			const content = () => resolvedChildren();
+			const content = createMemo(() => local.children);
 			const textChild = () => getSingleTextChild(content());
-			return textChild() !== void 0 ? <span class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })}  _Jb151`} data-rsp-slot="text">
-          {textChild()}
-        </span> : content();
+			return <>
+          {textChild() !== void 0 ? <span class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })}  _Jb17`} data-rsp-slot="text">
+              {textChild()}
+            </span> : content()}
+        </>;
 		}
 		return <>
-        <SkeletonContext.Provider value={null}>
-          <TextContext.Provider value={textContextValue}>
-            <IconContext.Provider value={iconContextValue}>
+        <SkeletonContext value={null}>
+          <TextContext$1 value={textContextValue}>
+            <IconContext value={iconContextValue}>
               <ResolvedContent />
               {local.isPending ? <div class={s2ButtonPendingIndicator({
 			isPending: local.isPending,
@@ -111,9 +163,9 @@ function Button$1(props) {
 		})}>
                   <S2PendingProgressCircle aria-label={pendingLabel()} size={size()} staticColor={local.staticColor} />
                 </div> : null}
-            </IconContext.Provider>
-          </TextContext.Provider>
-        </SkeletonContext.Provider>
+            </IconContext>
+          </TextContext$1>
+        </SkeletonContext>
       </>;
 	}
 	return <Button {...headlessProps} isPending={local.isPending} isPendingFocusable ref={(element) => {
@@ -123,9 +175,7 @@ function Button$1(props) {
 		local.onHoverChange?.(hovered);
 	}} onPressChange={(pressed) => {
 		local.onPressChange?.(pressed);
-	}} onPress={(event) => {
-		if (!local.isPending) local.onPress?.(event);
-	}} class={getClassName} style={getPressScaleStyle}>
+	}} onPress={local.onPress} class={getClassName} style={getPressScaleStyle}>
       <ButtonContent />
     </Button>;
 }
@@ -147,44 +197,45 @@ const iconSizes = {
 };
 const clearButtonStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " sh151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " _je151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "lg") rules += " ZC151";
-	else if (props.size === "md") rules += " Zo151";
-	else if (props.size === "sm") rules += " Zm151";
-	if (props.size === "lg") rules += " Fx151";
-	else if (props.size === "md") rules += " Fp151";
-	else if (props.size === "sm") rules += " Fn151";
-	if (props.isDisabled) rules += " g9151";
-	else if (props.isPressed) rules += " gG1H3ce151";
-	else if (props.isHovered) rules += " gkDWoNd151";
-	else rules += " g9151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pHKLAu151";
-	else if (props.isHovered) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " sh17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " _je17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.size === "lg") rules += " ZC17";
+	else if (props.size === "md") rules += " Zo17";
+	else if (props.size === "sm") rules += " Zm17";
+	if (props.size === "lg") rules += " Fx17";
+	else if (props.size === "md") rules += " Fp17";
+	else if (props.size === "sm") rules += " Fn17";
+	if (props.isDisabled) rules += " g917";
+	else if (props.isPressed) rules += " g8DRfdc17";
+	else if (props.isHovered) rules += " gLX7Xt17";
+	else rules += " g917";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pmiKvLd17";
+	else if (props.isHovered) rules += " pmiKvLd17";
+	else rules += " pLw1gcc17";
 	return rules;
 };
 /**
 * An icon-only clear/dismiss button, typically used in search fields and tags.
 */ function ClearButton(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(props), ["size", "class"]);
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, ["size", "class"]);
 	const size = () => local.size ?? "md";
 	const getClassName = (renderProps) => [clearButtonStyles({
 		size: size(),
@@ -194,55 +245,56 @@ const clearButtonStyles = function anonymous(props) {
 		isFocusVisible: renderProps.isFocusVisible
 	}), local.class].filter(Boolean).join(" ");
 	return <Button {...headlessProps} aria-label={headlessProps["aria-label"] ?? "Clear"} class={getClassName}>
-      <IconContext.Provider value={{
+      <IconContext value={{
 		slot: "icon",
 		render: centerBaseline({ slot: "icon" })
 	}}>
         <Cross style={iconSizes[size()]} />
-      </IconContext.Provider>
+      </IconContext>
     </Button>;
 }
 //#endregion
 //#region src/button/FieldButton.tsx
 const fieldButtonStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kb151";
-	rules += " sh151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " St151";
-	rules += " Rt151";
-	rules += " _jf151";
-	rules += " _ka151";
-	rules += " ha151";
-	rules += " mb151";
-	rules += " la151";
-	rules += " ifbAdGe151";
-	rules += " na151";
-	rules += " ja151";
-	rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.isPressed) rules += " gG1H3ce151";
-	else if (props.isHovered) rules += " gG1H3ce151";
-	else rules += " gkDWoNd151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pHKLAu151";
-	else if (props.isHovered) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kb17";
+	rules += " sh17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " St17";
+	rules += " Rt17";
+	rules += " _jf17";
+	rules += " _ka17";
+	rules += " ha17";
+	rules += " mb17";
+	rules += " la17";
+	rules += " iSNu3ze17";
+	rules += " na17";
+	rules += " ja17";
+	rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.isPressed) rules += " g8DRfdc17";
+	else if (props.isHovered) rules += " g8DRfdc17";
+	else rules += " gLX7Xt17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pmiKvLd17";
+	else if (props.isHovered) rules += " pmiKvLd17";
+	else rules += " pLw1gcc17";
 	return rules;
 };
 /**
 * A button designed to sit inside an input field.
 */ function FieldButton(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(props), ["class"]);
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, ["class"]);
 	const getClassName = (renderProps) => [fieldButtonStyles({
 		isHovered: renderProps.isHovered,
 		isPressed: renderProps.isPressed,
@@ -255,57 +307,58 @@ const fieldButtonStyles = function anonymous(props) {
 //#region src/button/LogicButton.tsx
 const logicButtonStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " sh151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " St151";
-	rules += " Rt151";
-	rules += " Tj151";
-	rules += " Qj151";
-	rules += " Nl151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-a151";
-	rules += " vx151";
-	rules += " xd151";
-	rules += " _xa151";
-	rules += " xX0cczbc151";
-	rules += " _xX0cczba151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isSelected) rules += " px151";
-	else rules += " pUUi0Fe151";
-	rules += " oa151";
-	rules += " na151";
-	rules += " ka151";
-	rules += " ja151";
-	rules += " _jf151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.isSelected) rules += " g5dxOg151";
-	else rules += " gkDWoNd151";
-	if (props.isDisabled) rules += " iA151";
-	else if (props.isSelected) rules += " iA151";
-	else rules += " ifbAdGe151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " sh17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " St17";
+	rules += " Rt17";
+	rules += " Tj17";
+	rules += " Qj17";
+	rules += " Nl17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-a17";
+	rules += " vx17";
+	rules += " xd17";
+	rules += " _xa17";
+	rules += " xX0cczbc17";
+	rules += " _xX0cczba17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isSelected) rules += " px17";
+	else rules += " pLw1gcc17";
+	rules += " oa17";
+	rules += " na17";
+	rules += " ka17";
+	rules += " ja17";
+	rules += " _jf17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.isSelected) rules += " gwOLUue17";
+	else rules += " gLX7Xt17";
+	if (props.isDisabled) rules += " iA17";
+	else if (props.isSelected) rules += " iA17";
+	else rules += " iSNu3ze17";
 	return rules;
 };
 /**
 * An AND/OR logic toggle button. Displays "AND" when selected (default), "OR" when not.
 */ function LogicButton(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(props), ["class"]);
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, ["class"]);
 	const getClassName = (renderProps) => [logicButtonStyles({
 		isSelected: renderProps.isSelected,
 		isDisabled: renderProps.isDisabled,