@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,182 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React, { useContext, useEffect } from 'react';
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
+import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroupContext.js';
+import classes from './Checkbox.module.css.js';
+import sharedClasses from './shared.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+
+/**
+ * An accessible, native checkbox component
+ */
+const Checkbox = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(40);
+  let checked;
+  let className;
+  let defaultChecked;
+  let disabled;
+  let indeterminate;
+  let onChange;
+  let required;
+  let rest;
+  let validationStatus;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      checked,
+      className,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onChange,
+      required,
+      validationStatus,
+      value,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = defaultChecked;
+    $[4] = disabled;
+    $[5] = indeterminate;
+    $[6] = onChange;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = validationStatus;
+    $[10] = value;
+  } else {
+    checked = $[1];
+    className = $[2];
+    defaultChecked = $[3];
+    disabled = $[4];
+    indeterminate = $[5];
+    onChange = $[6];
+    required = $[7];
+    rest = $[8];
+    validationStatus = $[9];
+    value = $[10];
+  }
+  const checkboxRef = useProvidedRefOrCreate(ref);
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+  let t1;
+  if ($[11] !== checkboxGroupContext || $[12] !== onChange) {
+    t1 = e => {
+      checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
+      onChange && onChange(e);
+    };
+    $[11] = checkboxGroupContext;
+    $[12] = onChange;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  const handleOnChange = t1;
+  const t2 = indeterminate ? false : checked;
+  const t3 = required ? "true" : "false";
+  const t4 = validationStatus === "error" ? "true" : "false";
+  let t5;
+  if ($[14] !== checkboxRef || $[15] !== defaultChecked || $[16] !== disabled || $[17] !== handleOnChange || $[18] !== required || $[19] !== rest || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== value) {
+    t5 = {
+      type: "checkbox",
+      disabled,
+      ref: checkboxRef,
+      checked: t2,
+      defaultChecked,
+      required,
+      "aria-required": t3,
+      "aria-invalid": t4,
+      onChange: handleOnChange,
+      value,
+      name: value,
+      ...rest
+    };
+    $[14] = checkboxRef;
+    $[15] = defaultChecked;
+    $[16] = disabled;
+    $[17] = handleOnChange;
+    $[18] = required;
+    $[19] = rest;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = value;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  const inputProps = t5;
+  let t6;
+  if ($[25] !== checkboxRef || $[26] !== indeterminate) {
+    t6 = () => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = indeterminate || false;
+      }
+    };
+    $[25] = checkboxRef;
+    $[26] = indeterminate;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  let t7;
+  if ($[28] !== checkboxRef || $[29] !== checked || $[30] !== indeterminate) {
+    t7 = [indeterminate, checked, checkboxRef];
+    $[28] = checkboxRef;
+    $[29] = checked;
+    $[30] = indeterminate;
+    $[31] = t7;
+  } else {
+    t7 = $[31];
+  }
+  useIsomorphicLayoutEffect(t6, t7);
+  let t8;
+  if ($[32] !== checkboxRef || $[33] !== indeterminate) {
+    t8 = () => {
+      const {
+        current: checkbox
+      } = checkboxRef;
+      if (!checkbox) {
+        return;
+      }
+      if (indeterminate) {
+        checkbox.setAttribute("aria-checked", "mixed");
+      } else {
+        checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
+      }
+    };
+    $[32] = checkboxRef;
+    $[33] = indeterminate;
+    $[34] = t8;
+  } else {
+    t8 = $[34];
+  }
+  useEffect(t8);
+  let t9;
+  if ($[35] !== className) {
+    t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
+    $[35] = className;
+    $[36] = t9;
+  } else {
+    t9 = $[36];
+  }
+  let t10;
+  if ($[37] !== inputProps || $[38] !== t9) {
+    t10 = /*#__PURE__*/jsx("input", {
+      ...inputProps,
+      className: t9
+    });
+    $[37] = inputProps;
+    $[38] = t9;
+    $[39] = t10;
+  } else {
+    t10 = $[39];
+  }
+  return t10;
+});
+Checkbox.displayName = 'Checkbox';
+Checkbox.__SLOT__ = Symbol('Checkbox');
+
+export { Checkbox as default };

package/dist/Checkbox/Checkbox.module.css.js

@@ -0,0 +1,5 @@
+import './Checkbox-edc5dc3e.css';
+
+var classes = {"Checkbox":"prc-Checkbox-Checkbox-gIwWX"};
+
+export { classes as default };

package/dist/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import type { CheckboxOrRadioGroupProps } from '../internal/components/CheckboxOrRadioGroup';
+import { CheckboxGroupContext } from './CheckboxGroupContext';
+import type { FCWithSlotMarker } from '../utils/types';
+export type CheckboxGroupProps = {
+    /**
+     * An onChange handler that gets called when any of the checkboxes change
+     */
+    onChange?: (selected: string[], e?: ChangeEvent<HTMLInputElement>) => void;
+} & CheckboxOrRadioGroupProps;
+export { CheckboxGroupContext };
+declare const _default: React.FC<React.PropsWithChildren<CheckboxGroupProps>> & import("..").SlotMarker & {
+    Caption: FCWithSlotMarker<{
+        className?: string;
+    } & {
+        children?: React.ReactNode | undefined;
+    }>;
+    Label: FCWithSlotMarker<React.PropsWithChildren<import("../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel").CheckboxOrRadioGroupLabelProps>>;
+    Validation: FCWithSlotMarker<React.PropsWithChildren<import("../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation").CheckboxOrRadioGroupValidationProps>>;
+};
+export default _default;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAqB,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,6CAA6C,CAAA;AAQ1F,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAA;AAE3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC3E,GAAG,yBAAyB,CAAA;AAwD7B,OAAO,EAAC,oBAAoB,EAAC,CAAA;;;;;;;;;;AAE7B,wBAIE"}

package/dist/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,143 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import CheckboxOrRadioGroupCaption from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js';
+import CheckboxOrRadioGroupLabel from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js';
+import CheckboxOrRadioGroupValidation from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import { isSlot } from '../utils/is-slot.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRenderForcingRef } from '../hooks/useRenderForcingRef.js';
+import CheckboxOrRadioGroup from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js';
+import FormControl from '../FormControl/FormControl.js';
+
+const CheckboxGroup = t0 => {
+  const $ = c(24);
+  let children;
+  let disabled;
+  let onChange;
+  let rest;
+  if ($[0] !== t0) {
+    ({
+      children,
+      disabled,
+      onChange,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = disabled;
+    $[3] = onChange;
+    $[4] = rest;
+  } else {
+    children = $[1];
+    disabled = $[2];
+    onChange = $[3];
+    rest = $[4];
+  }
+  let t1;
+  if ($[5] !== children) {
+    const formControlComponentChildren = React.Children.toArray(children).filter(_temp).map(_temp2).flat();
+    t1 = React.Children.toArray(formControlComponentChildren).filter(_temp3).map(_temp4).filter(Boolean);
+    $[5] = children;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const checkedCheckboxes = t1;
+  const [selectedCheckboxValues, setSelectedCheckboxValues] = useRenderForcingRef(checkedCheckboxes);
+  let t2;
+  if ($[7] !== selectedCheckboxValues || $[8] !== setSelectedCheckboxValues) {
+    t2 = e => {
+      const {
+        value,
+        checked
+      } = e.currentTarget;
+      if (checked) {
+        setSelectedCheckboxValues([...(selectedCheckboxValues.current || []), value]);
+        return;
+      }
+      setSelectedCheckboxValues((selectedCheckboxValues.current || []).filter(selectedValue => selectedValue !== value));
+    };
+    $[7] = selectedCheckboxValues;
+    $[8] = setSelectedCheckboxValues;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const updateSelectedCheckboxes = t2;
+  let t3;
+  if ($[10] !== onChange || $[11] !== selectedCheckboxValues || $[12] !== updateSelectedCheckboxes) {
+    t3 = e_0 => {
+      if (onChange) {
+        updateSelectedCheckboxes(e_0);
+        onChange(selectedCheckboxValues.current || [], e_0);
+      }
+    };
+    $[10] = onChange;
+    $[11] = selectedCheckboxValues;
+    $[12] = updateSelectedCheckboxes;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== disabled || $[15] !== t3) {
+    t4 = {
+      disabled,
+      onChange: t3
+    };
+    $[14] = disabled;
+    $[15] = t3;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== children || $[18] !== disabled || $[19] !== rest) {
+    t5 = /*#__PURE__*/jsx(CheckboxOrRadioGroup, {
+      disabled: disabled,
+      ...rest,
+      children: children
+    });
+    $[17] = children;
+    $[18] = disabled;
+    $[19] = rest;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  let t6;
+  if ($[21] !== t4 || $[22] !== t5) {
+    t6 = /*#__PURE__*/jsx(CheckboxGroupContext.Provider, {
+      value: t4,
+      children: t5
+    });
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  return t6;
+};
+var CheckboxGroup$1 = Object.assign(CheckboxGroup, {
+  Caption: CheckboxOrRadioGroupCaption,
+  Label: CheckboxOrRadioGroupLabel,
+  Validation: CheckboxOrRadioGroupValidation
+});
+CheckboxGroup.__SLOT__ = Symbol('CheckboxGroup');
+function _temp(child) {
+  return /*#__PURE__*/React.isValidElement(child) && (child.type === FormControl || isSlot(child, FormControl));
+}
+function _temp2(formControlComponent) {
+  return /*#__PURE__*/React.isValidElement(formControlComponent) ? formControlComponent.props.children : [];
+}
+function _temp3(child_0) {
+  return /*#__PURE__*/React.isValidElement(child_0) && (child_0.type === Checkbox || isSlot(child_0, Checkbox));
+}
+function _temp4(checkbox) {
+  return /*#__PURE__*/React.isValidElement(checkbox) && (checkbox.props.checked || checkbox.props.defaultChecked) && checkbox.props.value;
+}
+
+export { CheckboxGroupContext, CheckboxGroup$1 as default };

package/dist/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default, CheckboxGroupContext, type CheckboxGroupProps } from './CheckboxGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/CheckboxGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,kBAAkB,EAAC,MAAM,iBAAiB,CAAA"}

package/dist/CircleBadge/CircleBadge-87549d20.css

@@ -0,0 +1,2 @@
+.prc-CircleBadge-CircleBadge-AFS8i{align-items:center;background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:50%;box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));display:flex;justify-content:center}.prc-CircleBadge-CircleBadge-AFS8i:where([data-inline]){display:inline-flex}.prc-CircleBadge-CircleBadgeIcon-sUrCi{height:auto;max-height:55%;max-width:60%}
+/*# sourceMappingURL=CircleBadge-87549d20.css.map */

package/dist/CircleBadge/CircleBadge-87549d20.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CircleBadge/CircleBadge.module.css"],"names":[],"mappings":"AAAA,mCAEE,kBAAmB,CAEnB,mEAAwC,CACxC,iBAAkB,CAClB,kEAAwC,CALxC,YAAa,CAEb,sBAQF,CAHE,wDACE,mBACF,CAGF,uCACE,WAAY,CACZ,cAAe,CACf,aACF","file":"CircleBadge-87549d20.css","sourcesContent":[".CircleBadge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--bgColor-default);\n  border-radius: 50%;\n  box-shadow: var(--shadow-resting-medium);\n\n  &:where([data-inline]) {\n    display: inline-flex;\n  }\n}\n\n.CircleBadgeIcon {\n  height: auto;\n  max-height: 55%;\n  max-width: 60%;\n}\n"]}

package/dist/CircleBadge/CircleBadge.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from '../utils/types';
+import type { OcticonProps } from '../Octicon';
+declare const variantSizes: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export type CircleBadgeProps<As extends React.ElementType> = {
+    inline?: boolean;
+    variant?: keyof typeof variantSizes;
+    size?: number;
+    as?: As;
+    className?: string;
+} & React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>;
+declare const CircleBadgeIcon: {
+    (props: OcticonProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
+declare const _default: (<As extends React.ElementType>({ as: Component, ...props }: CircleBadgeProps<As>) => import("react").JSX.Element) & {
+    Icon: {
+        (props: OcticonProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=CircleBadge.d.ts.map

package/dist/CircleBadge/CircleBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleBadge.d.ts","sourceRoot":"","sources":["../../src/CircleBadge/CircleBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAG5C,QAAA,MAAM,YAAY;;;;CAIjB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,CAAA;AAmBxE,QAAA,MAAM,eAAe;YAAW,YAAY;;CAA8D,CAAA;AAI1G,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEzE;;;GAGG;0BAlBkB,EAAE,SAAS,KAAK,CAAC,WAAW,+BAAqC,gBAAgB,CAAC,EAAE,CAAC;;gBAS1E,YAAY;;;;AAU5C,wBAAkE"}

package/dist/CircleBadge/CircleBadge.js

@@ -0,0 +1,97 @@
+import { c } from 'react-compiler-runtime';
+import isNumeric from '../utils/isNumeric.js';
+import styles from './CircleBadge.module.css.js';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import Octicon from '../Octicon/Octicon.js';
+
+const variantSizes = {
+  small: 56,
+  medium: 96,
+  large: 128
+};
+const sizeStyles = ({
+  size,
+  variant = 'medium'
+}) => {
+  const calc = isNumeric(size) ? size : variantSizes[variant];
+  return {
+    width: calc,
+    height: calc
+  };
+};
+const CircleBadge = t0 => {
+  const $ = c(12);
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    const {
+      as: t5,
+      ...props
+    } = t0;
+    const Component = t5 === undefined ? "div" : t5;
+    T0 = Component;
+    t1 = props;
+    t2 = clsx(styles.CircleBadge, props.className);
+    t3 = props.inline ? "" : undefined;
+    t4 = sizeStyles(props);
+    $[0] = t0;
+    $[1] = T0;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    T0 = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
+    t5 = /*#__PURE__*/jsx(T0, {
+      ...t1,
+      className: t2,
+      "data-inline": t3,
+      style: t4
+    });
+    $[6] = T0;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+};
+const CircleBadgeIcon = props => {
+  const $ = c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/jsx(Octicon, {
+      className: styles.CircleBadgeIcon,
+      ...props
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+CircleBadgeIcon.displayName = 'CircleBadge.Icon';
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
+var CircleBadge$1 = Object.assign(CircleBadge, {
+  Icon: CircleBadgeIcon
+});
+
+export { CircleBadge$1 as default };

package/dist/CircleBadge/CircleBadge.module.css.js

@@ -0,0 +1,5 @@
+import './CircleBadge-87549d20.css';
+
+var styles = {"CircleBadge":"prc-CircleBadge-CircleBadge-AFS8i","CircleBadgeIcon":"prc-CircleBadge-CircleBadgeIcon-sUrCi"};
+
+export { styles as default };

package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css

@@ -0,0 +1,2 @@
+.prc-ConfirmationDialog-ConfirmationHeader-yiLEc{display:flex;flex-direction:row;padding:var(--base-size-8,.5rem)}.prc-ConfirmationDialog-ConfirmationHeader-yiLEc>h1{flex-grow:1;padding:var(--base-size-6,.375rem) var(--base-size-8,.5rem)}.prc-ConfirmationDialog-ConfirmationBody-ht9P-{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);padding:0 var(--base-size-16,1rem) var(--base-size-16,1rem) var(--base-size-16,1rem)}.prc-ConfirmationDialog-ConfirmationFooter-AqKBI{display:grid;grid-auto-columns:max-content;grid-auto-flow:column;grid-gap:var(--base-size-8,.5rem);align-items:end;justify-content:end;padding:var(--base-size-4,.25rem) var(--base-size-16,1rem) var(--base-size-16,1rem)}
+/*# sourceMappingURL=ConfirmationDialog-87ccf595.css.map */

package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ConfirmationDialog/ConfirmationDialog.module.css"],"names":[],"mappings":"AAAA,iDACE,YAAa,CAEb,kBAAmB,CADnB,gCAOF,CAJE,oDAEE,WAAY,CADZ,2DAEF,CAGF,+CAGE,WAAY,CADZ,8CAAuC,CADvC,oFAGF,CAEA,iDACE,YAAa,CAEb,6BAA8B,CAD9B,qBAAsB,CAEtB,iCAA4B,CAC5B,eAAgB,CAChB,mBAAoB,CACpB,mFACF","file":"ConfirmationDialog-87ccf595.css","sourcesContent":[".ConfirmationHeader {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: row;\n\n  > h1 {\n    padding: var(--base-size-6) var(--base-size-8);\n    flex-grow: 1;\n  }\n}\n\n.ConfirmationBody {\n  padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16);\n  font-size: var(--text-body-size-medium);\n  flex-grow: 1;\n}\n\n.ConfirmationFooter {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  grid-gap: var(--base-size-8);\n  align-items: end;\n  justify-content: end;\n  padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);\n}\n"]}

package/dist/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -0,0 +1,80 @@
+import type React from 'react';
+import type { DialogWidth, DialogHeight } from '../Dialog/Dialog';
+/**
+ * Props to customize the ConfirmationDialog.
+ */
+export interface ConfirmationDialogProps {
+    /**
+     * Required. This callback is invoked when a gesture to close the dialog
+     * is performed. The first argument indicates the gesture.
+     */
+    onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void;
+    /**
+     * Required. The title of the ConfirmationDialog. This is usually a brief
+     * question.
+     */
+    title: React.ReactNode;
+    /**
+     * The text to use for the cancel button. Default: "Cancel".
+     */
+    cancelButtonContent?: React.ReactNode;
+    /**
+     * The text to use for the confirm button. Default: "OK".
+     */
+    confirmButtonContent?: React.ReactNode;
+    /**
+     * The type of button to use for the confirm button. Default: Button.
+     */
+    confirmButtonType?: 'normal' | 'primary' | 'danger';
+    /**
+     * Whether the cancel button is in a loading state. Default: false.
+     */
+    cancelButtonLoading?: boolean;
+    /**
+     * Whether the confirm button is in a loading state. Default: false.
+     */
+    confirmButtonLoading?: boolean;
+    /**
+     * Overrides the button that should be initially focused when the dialog is opened. By default, the confirm button
+     * is focused initially unless it is a dangerous action, in which case the cancel button is focused. This should
+     * rarely be overridden, in order to ensure that the user does not accidentally confirm a dangerous action.
+     */
+    overrideButtonFocus?: 'cancel' | 'confirm';
+    /**
+     * Additional class names to apply to the dialog
+     */
+    className?: string;
+    /**
+     * The width of the dialog.
+     * small: 296px
+     * medium: 320px
+     * large: 480px
+     * xlarge: 640px
+     * @default 'medium'
+     */
+    width?: DialogWidth;
+    /**
+     * The height of the dialog.
+     * small: 480px
+     * large: 640px
+     * auto: variable based on contents
+     */
+    height?: DialogHeight;
+}
+/**
+ * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
+ * is used to confirm a user action. ConfirmationDialogs always have exactly
+ * two buttons: one to cancel the action and one to confirm it. No custom
+ * rendering capabilities are provided for ConfirmationDialog.
+ */
+export declare const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>>;
+export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {
+    content: React.ReactNode;
+};
+/**
+ * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
+ * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
+ * resolved with `true` or `false` depending on whether or not the confirm button was used.
+ */
+export declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;
+//# sourceMappingURL=ConfirmationDialog.d.ts.map

package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAoD,WAAW,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAOlH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAmCD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAuDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAyBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}