@itwin/core-react 4.17.6 → 5.0.0-dev.3

package/lib/core-react/icons/ConditionalIconItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalIconItem.js","sourceRoot":"","sources":["../../../src/core-react/icons/ConditionalIconItem.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAIH,4CAA4C;AAE5C;;;GAGG;AACH,MAAM,OAAO,mBAAmB;IAG9B;;;;OAIG;IACH,YACkB,UAA0B,EAC1B,YAAsB,EACtC,KAAgB;QAFA,eAAU,GAAV,UAAU,CAAgB;QAC1B,iBAAY,GAAZ,YAAY,CAAU;QAGtC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,mDAAmD;IACnD,IAAW,KAAK;QACd,IAAI,SAAS,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,MAAM,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,2DAA2D;IACpD,OAAO;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEnC,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;YACvB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,gGAAgG;IACzF,MAAM,CAAC,YAAY,CACxB,gBAA0D,EAC1D,QAAqB;QAErB,IACE,SAAS,KAAK,gBAAgB;YAC9B,CAAC,CAAC,gBAAgB,YAAY,mBAAmB,CAAC;YAElD,OAAO,KAAK,CAAC;QAEf,MAAM,QAAQ,GAAG,gBAAgB,CAAC;QAElC,IACE,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAa,EAAW,EAAE,CACpD,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAClC;YAED,OAAO,QAAQ,CAAC,OAAO,EAAE,CAAC;QAE5B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,0FAA0F;IACnF,MAAM,CAAC,QAAQ,CACpB,gBAA0D;QAE1D,IAAI,SAAS,KAAK,gBAAgB;YAAE,OAAO,SAAS,CAAC;QAErD,IAAI,gBAAgB,YAAY,mBAAmB,EAAE,CAAC;YACpD,MAAM,QAAQ,GAAG,gBAAgB,CAAC;YAClC,OAAO,QAAQ,CAAC,KAAK,CAAC;QACxB,CAAC;QAED,OAAO,gBAAgB,CAAC;IAC1B,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport type { IconSpec } from \"./IconComponent.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Class used to return an icon. The icon is variable and can be changed in response to subscribed event ids.\n * @public\n * @deprecated in 4.16.0. Uses a deprecated {@link IconSpec} type. Use conditional rendering to render different icons.\n */\nexport class ConditionalIconItem {\n  private _value?: IconSpec;\n\n  /** Constructor for ConditionalIconItem\n   * @param iconGetter Function to retrieve the icon that matches the condition. Returns an IconSpec.\n   * @param syncEventIds The array of event ids to be monitored. These events are triggered when the condition(s) that control the icon change.\n   * @param value The default IconSpec. If this is not specified, the function is run to get the initial value.\n   */\n  constructor(\n    public readonly iconGetter: () => IconSpec,\n    public readonly syncEventIds: string[],\n    value?: IconSpec\n  ) {\n    this._value = value;\n  }\n\n  /** The current IconSpec according to conditions */\n  public get value(): IconSpec {\n    if (undefined !== this._value) return this._value;\n    this._value = this.iconGetter();\n    return this._value;\n  }\n\n  /** Called to update the value by running the iconGetter */\n  public refresh(): boolean {\n    const newValue = this.iconGetter();\n\n    if (newValue !== this._value) {\n      this._value = newValue;\n      return true;\n    }\n    return false;\n  }\n\n  /** A helper function that updates the IconSpec value when the specified events are triggered */\n  public static refreshValue(\n    conditionalValue: ConditionalIconItem | string | undefined,\n    eventIds: Set<string>\n  ): boolean {\n    if (\n      undefined === conditionalValue ||\n      !(conditionalValue instanceof ConditionalIconItem)\n    )\n      return false;\n\n    const iconItem = conditionalValue;\n\n    if (\n      iconItem.syncEventIds.some((value: string): boolean =>\n        eventIds.has(value.toLowerCase())\n      )\n    )\n      return iconItem.refresh();\n\n    return false;\n  }\n  /** helper function to get the iconSpec from a ConditionIconItem as IconSpec | undefined*/\n  public static getValue(\n    conditionalValue: ConditionalIconItem | string | undefined\n  ): IconSpec | undefined {\n    if (undefined === conditionalValue) return undefined;\n\n    if (conditionalValue instanceof ConditionalIconItem) {\n      const iconItem = conditionalValue;\n      return iconItem.value;\n    }\n\n    return conditionalValue;\n  }\n}\n"]}

package/lib/core-react/icons/IconComponent.d.ts

@@ -0,0 +1,34 @@
+/** @packageDocumentation
+ * @module Icon
+ */
+import "./IconComponent.scss";
+import * as React from "react";
+import { ConditionalStringValue } from "@itwin/appui-abstract";
+import type { CommonProps } from "../utils/Props.js";
+import { ConditionalIconItem } from "./ConditionalIconItem.js";
+/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.
+ * Strings are expected to be one of the following:
+ *  - Created by `IconSpecUtilities.createWebComponentIconSpec` in appui-abstract (deprecated).
+ *  - A URL to a SVG file (must end with ".svg").
+ *  - A dataURI with MimeTypes `image/svg+xml` (ensure valid dataURI encoding) or `image/svg+xml;base64`;
+ *  - Anything else will be treated as a class name and be directly added to the `class` attribute.
+ * @public
+ * @deprecated in 4.16.0. Use `React.ReactNode` instead.
+ */
+export type IconSpec = string | ConditionalStringValue | React.ReactNode | ConditionalIconItem;
+/** Properties for the [[Icon]] React component
+ * @public
+ * @deprecated in 4.16.0. Props of deprecated {@link Icon} component.
+ */
+export interface IconProps extends CommonProps {
+    /** CSS class name or SvgPath for icon. This is optional because it is improperly
+     * used to extend other interfaces and changing it would break existing API.
+     */
+    iconSpec?: IconSpec;
+}
+/** Icon Functional component displays an icon based on an [[IconSpec]].
+ * @public
+ * @deprecated in 4.16.0. Used to render a deprecated {@link IconSpec} type. Use {@link https://itwinui.bentley.com/ iTwinUI Icon} instead.
+ */
+export declare function Icon(props: IconProps): React.JSX.Element | null;
+//# sourceMappingURL=IconComponent.d.ts.map

package/lib/core-react/icons/IconComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconComponent.d.ts","sourceRoot":"","sources":["../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,sBAAsB,GACtB,KAAK,CAAC,SAAS,GACf,mBAAmB,CAAC;AAExB;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAWD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,4BA4DpC"}

package/lib/core-react/icons/IconComponent.js

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Icon
+ */
+import "./IconComponent.scss";
+import * as React from "react";
+import classnames from "classnames";
+import { ConditionalStringValue } from "@itwin/appui-abstract";
+import DOMPurify, * as DOMPurifyNS from "dompurify";
+import { ConditionalIconItem } from "./ConditionalIconItem.js";
+/** Get the SVG Source from an svg-loader IconSpec */
+function getWebComponentSource(iconSpec) {
+    if (iconSpec.startsWith("webSvg:") && iconSpec.length > 7) {
+        return iconSpec.slice(7);
+    }
+    return undefined;
+}
+/** Icon Functional component displays an icon based on an [[IconSpec]].
+ * @public
+ * @deprecated in 4.16.0. Used to render a deprecated {@link IconSpec} type. Use {@link https://itwinui.bentley.com/ iTwinUI Icon} instead.
+ */
+export function Icon(props) {
+    if (!props.iconSpec)
+        return null;
+    const iconSpecValue = getIconSpecValue(props.iconSpec);
+    if (typeof iconSpecValue === "string") {
+        const iconString = iconSpecValue;
+        const webComponentString = getWebComponentSource(iconString);
+        if (iconString.startsWith("data:") ||
+            iconString.endsWith(".svg") ||
+            webComponentString) {
+            const definitiveIconString = webComponentString
+                ? webComponentString
+                : iconString;
+            const svgLoader = `<svg-loader src="${definitiveIconString}"></svg-loader>`;
+            const svgDiv = `<div>${svgLoader}</div>`;
+            // the esm build of dompurify has a default import but the cjs build does not
+            // if there is a default export, use it (likely esm), otherwise use the namespace
+            const sanitizer = DOMPurify ?? DOMPurifyNS;
+            const sanitizerConfig = {
+                ALLOWED_TAGS: ["svg-loader"],
+                ADD_URI_SAFE_ATTR: definitiveIconString.startsWith("data:")
+                    ? ["src"]
+                    : [],
+            };
+            const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);
+            const webComponentNode = (
+            // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above
+            // eslint-disable-next-line jam3/no-sanitizer-with-danger
+            React.createElement("div", { dangerouslySetInnerHTML: { __html: sanitizedIconString } }));
+            return (React.createElement("i", { className: classnames("icon", "core-svg-icon", props.className) }, webComponentNode));
+        }
+        // CSS icon
+        return (React.createElement("i", { className: classnames("icon", iconString, props.className), style: props.style }));
+    }
+    // ReactNode icon
+    return (React.createElement("i", { className: classnames("icon", "core-svg-icon", props.className), style: props.style }, iconSpecValue));
+}
+function getIconSpecValue(iconSpec) {
+    let value = iconSpec;
+    while (true) {
+        if (value instanceof ConditionalIconItem) {
+            value = ConditionalIconItem.getValue(value);
+            continue;
+        }
+        if (value instanceof ConditionalStringValue) {
+            value = ConditionalStringValue.getValue(value);
+            break;
+        }
+        break;
+    }
+    return value;
+}
+//# sourceMappingURL=IconComponent.js.map

package/lib/core-react/icons/IconComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport \"./IconComponent.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ConditionalStringValue } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"../utils/Props.js\";\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\nimport { ConditionalIconItem } from \"./ConditionalIconItem.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\n * Strings are expected to be one of the following:\n *  - Created by `IconSpecUtilities.createWebComponentIconSpec` in appui-abstract (deprecated).\n *  - A URL to a SVG file (must end with \".svg\").\n *  - A dataURI with MimeTypes `image/svg+xml` (ensure valid dataURI encoding) or `image/svg+xml;base64`;\n *  - Anything else will be treated as a class name and be directly added to the `class` attribute.\n * @public\n * @deprecated in 4.16.0. Use `React.ReactNode` instead.\n */\nexport type IconSpec =\n  | string\n  | ConditionalStringValue\n  | React.ReactNode\n  | ConditionalIconItem;\n\n/** Properties for the [[Icon]] React component\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link Icon} component.\n */\nexport interface IconProps extends CommonProps {\n  /** CSS class name or SvgPath for icon. This is optional because it is improperly\n   * used to extend other interfaces and changing it would break existing API.\n   */\n  iconSpec?: IconSpec;\n}\n\n/** Get the SVG Source from an svg-loader IconSpec */\nfunction getWebComponentSource(iconSpec: string): string | undefined {\n  if (iconSpec.startsWith(\"webSvg:\") && iconSpec.length > 7) {\n    return iconSpec.slice(7);\n  }\n\n  return undefined;\n}\n\n/** Icon Functional component displays an icon based on an [[IconSpec]].\n * @public\n * @deprecated in 4.16.0. Used to render a deprecated {@link IconSpec} type. Use {@link https://itwinui.bentley.com/ iTwinUI Icon} instead.\n */\nexport function Icon(props: IconProps) {\n  if (!props.iconSpec) return null;\n\n  const iconSpecValue = getIconSpecValue(props.iconSpec);\n  if (typeof iconSpecValue === \"string\") {\n    const iconString = iconSpecValue;\n    const webComponentString = getWebComponentSource(iconString);\n\n    if (\n      iconString.startsWith(\"data:\") ||\n      iconString.endsWith(\".svg\") ||\n      webComponentString\n    ) {\n      const definitiveIconString = webComponentString\n        ? webComponentString\n        : iconString;\n      const svgLoader = `<svg-loader src=\"${definitiveIconString}\"></svg-loader>`;\n      const svgDiv = `<div>${svgLoader}</div>`;\n      // the esm build of dompurify has a default import but the cjs build does not\n      // if there is a default export, use it (likely esm), otherwise use the namespace\n      const sanitizer = DOMPurify ?? DOMPurifyNS;\n\n      const sanitizerConfig = {\n        ALLOWED_TAGS: [\"svg-loader\"],\n        ADD_URI_SAFE_ATTR: definitiveIconString.startsWith(\"data:\")\n          ? [\"src\"]\n          : [],\n      };\n\n      const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);\n      const webComponentNode = (\n        // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\n        // eslint-disable-next-line jam3/no-sanitizer-with-danger\n        <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>\n      );\n      return (\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)}>\n          {webComponentNode}\n        </i>\n      );\n    }\n\n    // CSS icon\n    return (\n      <i\n        className={classnames(\"icon\", iconString, props.className)}\n        style={props.style}\n      />\n    );\n  }\n\n  // ReactNode icon\n  return (\n    <i\n      className={classnames(\"icon\", \"core-svg-icon\", props.className)}\n      style={props.style}\n    >\n      {iconSpecValue}\n    </i>\n  );\n}\n\nfunction getIconSpecValue(\n  iconSpec: IconSpec\n): Exclude<IconSpec, ConditionalIconItem | ConditionalStringValue> {\n  let value = iconSpec;\n  while (true) {\n    if (value instanceof ConditionalIconItem) {\n      value = ConditionalIconItem.getValue(value);\n      continue;\n    }\n    if (value instanceof ConditionalStringValue) {\n      value = ConditionalStringValue.getValue(value);\n      break;\n    }\n    break;\n  }\n  return value;\n}\n"]}

package/lib/core-react/icons/IconComponent.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables" as *;
+
+.core-svg-icon {
+  width: $uicore-icons-small;
+  height: $uicore-icons-small;
+  svg {
+    width: $uicore-icons-small;
+    height: $uicore-icons-small;
+    fill: currentColor;
+  }
+}
+
+.icon.core-menuitem-icon {
+  font-size: 16px;
+}

package/lib/core-react/icons/SvgPath.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module Icon
+ */
+import "./SvgPath.scss";
+import * as React from "react";
+import type { CommonProps } from "../utils/Props.js";
+/** Properties of [[SvgPath]] component.
+ * @public
+ * @deprecated in 4.15.0. Props of deprecated {@link SvgPath} component.
+ */
+export interface SvgPathProps extends CommonProps {
+    /** Svg graphics paths */
+    paths: string[];
+    /** Svg viewBox width */
+    viewBoxWidth: number;
+    /** Svg viewBox height */
+    viewBoxHeight: number;
+}
+/** Svg element wrapper with specified Svg paths.
+ * @public
+ * @deprecated in 4.15.0. Not used by AppUI. Use `@itwin/itwinui-icons-react` package or svg element directly.
+ */
+export declare class SvgPath extends React.PureComponent<SvgPathProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=SvgPath.d.ts.map

package/lib/core-react/icons/SvgPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgPath.d.ts","sourceRoot":"","sources":["../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;GAGG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,yBAAyB;IACzB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,wBAAwB;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AAEH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAC5C,MAAM;CAoBvB"}

package/lib/core-react/icons/SvgPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgPath.js","sourceRoot":"","sources":["../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B;;;GAGG;AACH,mDAAmD;AACnD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,aAA2B;IAC5C,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzE,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAE7E,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAE,OAAO;YAEhB,+BACG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;gBACpD,OAAO,8BAAM,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;YACvC,CAAC,CAAC,CACA,CACA,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport \"./SvgPath.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"../utils/Props.js\";\n\n/** Properties of [[SvgPath]] component.\n * @public\n * @deprecated in 4.15.0. Props of deprecated {@link SvgPath} component.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface SvgPathProps extends CommonProps {\n  /** Svg graphics paths */\n  paths: string[];\n  /** Svg viewBox width */\n  viewBoxWidth: number;\n  /** Svg viewBox height */\n  viewBoxHeight: number;\n}\n\n/** Svg element wrapper with specified Svg paths.\n * @public\n * @deprecated in 4.15.0. Not used by AppUI. Use `@itwin/itwinui-icons-react` package or svg element directly.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport class SvgPath extends React.PureComponent<SvgPathProps> {\n  public override render() {\n    const className = classnames(\"core-icons-svgPath\", this.props.className);\n    const viewBox = `0 0 ${this.props.viewBoxWidth} ${this.props.viewBoxHeight}`;\n\n    return (\n      <svg\n        className={className}\n        style={this.props.style}\n        width=\"100%\"\n        height=\"100%\"\n        viewBox={viewBox}\n      >\n        <g>\n          {this.props.paths.map((path: string, index: number) => {\n            return <path d={path} key={index} />;\n          })}\n        </g>\n      </svg>\n    );\n  }\n}\n"]}

package/lib/core-react/icons/SvgPath.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-icons-svgPath {
+  display: inline-block;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  padding: auto;
+  overflow: hidden;
+  vertical-align: top;
+  fill: currentColor;
+  stroke: transparent;
+}

package/lib/core-react/icons/WebFontIcon.d.ts

@@ -0,0 +1,28 @@
+/** @packageDocumentation
+ * @module Icon
+ */
+import "./WebFontIcon.scss";
+import * as React from "react";
+import type { CommonProps } from "../utils/Props.js";
+/** Properties for the [[WebFontIcon]] React component
+ * @public
+ * @deprecated in 4.15.0. Props of deprecated {@link WebFontIcon} component.
+ */
+export interface WebFontIconProps extends CommonProps {
+    /** Bentley Web Font icon name */
+    iconName: string;
+    /** Click event handler */
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    /** Text that will be shown when hovered on the icon. */
+    title?: string;
+    /** Size of the icon */
+    iconSize?: "x-small" | "small" | "medium" | "large" | "x-large";
+    /** Class name of icon used for custom font-family icons */
+    iconClassName?: string;
+}
+/** WebFontIcon React component
+ * @public
+ * @deprecated in 4.15.0. Not used by AppUI. Use `@itwin/itwinui-icons-react` package.
+ */
+export declare function WebFontIcon(props: WebFontIconProps): React.JSX.Element;
+//# sourceMappingURL=WebFontIcon.d.ts.map

package/lib/core-react/icons/WebFontIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebFontIcon.d.ts","sourceRoot":"","sources":["../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;GAGG;AAEH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChE,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AAEH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAiBlD"}

package/lib/core-react/icons/WebFontIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebFontIcon.js","sourceRoot":"","sources":["../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B;;;GAGG;AACH,mDAAmD;AACnD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,SAAS,GAAG,UAAU,CAC1B,KAAK,CAAC,aAAa,IAAI,kBAAkB,EACzC,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,8BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,cAAc,GACnB,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport \"./WebFontIcon.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"../utils/Props.js\";\n\n/** Properties for the [[WebFontIcon]] React component\n * @public\n * @deprecated in 4.15.0. Props of deprecated {@link WebFontIcon} component.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface WebFontIconProps extends CommonProps {\n  /** Bentley Web Font icon name */\n  iconName: string;\n  /** Click event handler */\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n  /** Text that will be shown when hovered on the icon. */\n  title?: string;\n  /** Size of the icon */\n  iconSize?: \"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\";\n  /** Class name of icon used for custom font-family icons */\n  iconClassName?: string;\n}\n\n/** WebFontIcon React component\n * @public\n * @deprecated in 4.15.0. Not used by AppUI. Use `@itwin/itwinui-icons-react` package.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function WebFontIcon(props: WebFontIconProps) {\n  const className = classnames(\n    props.iconClassName || \"bui-webfont-icon\",\n    props.iconName,\n    props.iconSize ? `uicore-icons-${props.iconSize}` : undefined,\n    props.className\n  );\n\n  return (\n    <span\n      className={className}\n      title={props.title}\n      style={props.style}\n      onClick={props.onClick}\n      role=\"presentation\"\n    />\n  );\n}\n"]}

package/lib/core-react/icons/WebFontIcon.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.bui-webfont-icon {
+  font-family: bentley-icons-generic-webfont !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/lib/core-react/icons/classes.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-icons-large {
+  @include uicore-icons-large;
+}
+.uicore-icons-medium {
+  @include uicore-icons-medium;
+}
+.uicore-icons-small {
+  @include uicore-icons-small;
+}
+.uicore-icons-x-large {
+  @include uicore-icons-x-large;
+}

package/lib/core-react/icons/index.scss

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./variables";
+@forward "./mixins";

package/lib/core-react/icons/mixins.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables";
+
+@forward "./variables";
+
+@mixin uicore-icons-small {
+  width: variables.$uicore-icons-small;
+  height: variables.$uicore-icons-small;
+}
+
+@mixin uicore-icons-medium {
+  width: variables.$uicore-icons-medium;
+  height: variables.$uicore-icons-medium;
+}
+
+@mixin uicore-icons-large {
+  width: variables.$uicore-icons-large;
+  height: variables.$uicore-icons-large;
+}
+
+@mixin uicore-icons-x-large {
+  width: variables.$uicore-icons-x-large;
+  height: variables.$uicore-icons-x-large;
+}

package/lib/core-react/icons/variables.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+// Sizes
+$uicore-icons-x-small: 12px;
+$uicore-icons-smaller: 14px;
+$uicore-icons-small: 16px;
+$uicore-icons-medium: 2 * $uicore-icons-small;
+$uicore-icons-large: 3 * $uicore-icons-small;
+$uicore-icons-x-large: 4 * $uicore-icons-small;

package/lib/core-react/imagecheckbox/ImageCheckBox.d.ts

@@ -0,0 +1,43 @@
+/** @packageDocumentation
+ * @module Checkbox
+ */
+import "./ImageCheckBox.scss";
+import * as React from "react";
+import type { CommonProps } from "../utils/Props.js";
+/** Properties for the [[ImageCheckBox]] component
+ * @public
+ * @deprecated in 4.12.0. Props of deprecated component {@link ImageCheckBox}.
+ */
+export interface ImageCheckBoxProps extends CommonProps {
+    /** Image for the "checked" state */
+    imageOn: string | React.ReactNode;
+    /** Image for the "unchecked" (default) state */
+    imageOff: string | React.ReactNode;
+    /** Determine if the item is checked or not */
+    checked?: boolean;
+    /** Determine if the item is disabled or not */
+    disabled?: boolean;
+    /** Function called when item is clicked. */
+    onClick?: (checked: boolean) => any;
+    /** Custom CSS class name for the checkbox input element */
+    inputClassName?: string;
+    /** Custom CSS Style for the checkbox input element */
+    inputStyle?: React.CSSProperties;
+    /** Tooltip to be displayed when mouse is hovered over the checkbox */
+    tooltip?: string;
+    /** If true, draw a border around the image checkbox */
+    border?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/** ImageCheckBox React component shows a checked or unchecked image
+ * @public
+ * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/checkbox iTwinUI checkbox} instead (custom icons are not supported at the moment, but feel free to submit your use cases).
+ */
+export declare class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {
+    private _onChange;
+    private _onInputClick;
+    private _onLabelClick;
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=ImageCheckBox.d.ts.map

package/lib/core-react/imagecheckbox/ImageCheckBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCheckBox.d.ts","sourceRoot":"","sources":["../../../src/core-react/imagecheckbox/ImageCheckBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,oCAAoC;IACpC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxE,OAAO,CAAC,SAAS,CAMf;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEc,MAAM;CAqCvB"}

package/lib/core-react/imagecheckbox/ImageCheckBox.js

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Checkbox
+ */
+import "./ImageCheckBox.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "../icons/IconComponent.js";
+/** ImageCheckBox React component shows a checked or unchecked image
+ * @public
+ * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/checkbox iTwinUI checkbox} instead (custom icons are not supported at the moment, but feel free to submit your use cases).
+ */
+export class ImageCheckBox extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onChange = (e) => {
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+            if (this.props.onClick) {
+                this.props.onClick(e.target.checked);
+            }
+        };
+        this._onInputClick = (e) => {
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+        };
+        this._onLabelClick = (e) => {
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+        };
+    }
+    render() {
+        const checkBoxClass = classnames("core-image-checkbox", this.props.className);
+        const imageClass = classnames("image", this.props.border && "image-checkbox-border");
+        const iconSpec = this.props.checked
+            ? this.props.imageOn
+            : this.props.imageOff;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
+        React.createElement("label", { className: checkBoxClass, style: this.props.style, onClick: this._onLabelClick, title: this.props.tooltip },
+            React.createElement("input", { type: "checkbox", className: this.props.inputClassName, style: this.props.inputStyle, checked: this.props.checked, disabled: this.props.disabled, onChange: this._onChange, onClick: this._onInputClick, ref: this.props.inputRef }),
+            React.createElement("span", { className: imageClass },
+                React.createElement(Icon, { iconSpec: iconSpec }))));
+    }
+}
+//# sourceMappingURL=ImageCheckBox.js.map

package/lib/core-react/imagecheckbox/ImageCheckBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCheckBox.js","sourceRoot":"","sources":["../../../src/core-react/imagecheckbox/ImageCheckBox.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAgCjD;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAA1E;;QACU,cAAS,GAAG,CAAC,CAAsC,EAAE,EAAE;YAC7D,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;YAEhD,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;QAClD,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;QAClD,CAAC,CAAC;IAuCJ,CAAC;IArCiB,MAAM;QACpB,MAAM,aAAa,GAAG,UAAU,CAC9B,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,UAAU,GAAG,UAAU,CAC3B,OAAO,EACP,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,uBAAuB,CAC7C,CAAC;QACF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO;YACjC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;YACpB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAExB,OAAO;QACL,yJAAyJ;QACzJ,+BACE,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;YAEzB,+BACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GACxB;YACF,8BAAM,SAAS,EAAE,UAAU;gBACzB,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACvB,CACD,CACT,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Checkbox\n */\n\nimport \"./ImageCheckBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"../icons/IconComponent.js\";\nimport type { CommonProps } from \"../utils/Props.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Properties for the [[ImageCheckBox]] component\n * @public\n * @deprecated in 4.12.0. Props of deprecated component {@link ImageCheckBox}.\n */\nexport interface ImageCheckBoxProps extends CommonProps {\n  /** Image for the \"checked\" state */\n  imageOn: string | React.ReactNode;\n  /** Image for the \"unchecked\" (default) state */\n  imageOff: string | React.ReactNode;\n  /** Determine if the item is checked or not */\n  checked?: boolean;\n  /** Determine if the item is disabled or not */\n  disabled?: boolean;\n  /** Function called when item is clicked. */\n  onClick?: (checked: boolean) => any;\n  /** Custom CSS class name for the checkbox input element */\n  inputClassName?: string;\n  /** Custom CSS Style for the checkbox input element */\n  inputStyle?: React.CSSProperties;\n  /** Tooltip to be displayed when mouse is hovered over the checkbox */\n  tooltip?: string;\n  /** If true, draw a border around the image checkbox */\n  border?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\n/** ImageCheckBox React component shows a checked or unchecked image\n * @public\n * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/checkbox iTwinUI checkbox} instead (custom icons are not supported at the moment, but feel free to submit your use cases).\n */\nexport class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {\n  private _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (e && e.stopPropagation) e.stopPropagation();\n\n    if (this.props.onClick) {\n      this.props.onClick(e.target.checked);\n    }\n  };\n\n  private _onInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    if (e && e.stopPropagation) e.stopPropagation();\n  };\n\n  private _onLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    if (e && e.stopPropagation) e.stopPropagation();\n  };\n\n  public override render() {\n    const checkBoxClass = classnames(\n      \"core-image-checkbox\",\n      this.props.className\n    );\n    const imageClass = classnames(\n      \"image\",\n      this.props.border && \"image-checkbox-border\"\n    );\n    const iconSpec = this.props.checked\n      ? this.props.imageOn\n      : this.props.imageOff;\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={checkBoxClass}\n        style={this.props.style}\n        onClick={this._onLabelClick}\n        title={this.props.tooltip}\n      >\n        <input\n          type=\"checkbox\"\n          className={this.props.inputClassName}\n          style={this.props.inputStyle}\n          checked={this.props.checked}\n          disabled={this.props.disabled}\n          onChange={this._onChange}\n          onClick={this._onInputClick}\n          ref={this.props.inputRef}\n        />\n        <span className={imageClass}>\n          <Icon iconSpec={iconSpec} />\n        </span>\n      </label>\n    );\n  }\n}\n"]}

package/lib/core-react/imagecheckbox/ImageCheckBox.scss

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-image-checkbox {
+  display: inline-block;
+  font-size: 16px;
+  position: relative;
+  height: 1em;
+  width: 1em;
+  cursor: pointer;
+
+  input[type="checkbox"]:not(:checked),
+  input[type="checkbox"]:checked {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  input[type="checkbox"]:checked + .image {
+    color: var(--iui-color-text-accent);
+  }
+
+  input[type="checkbox"]:not(:checked) + .image {
+    color: var(--iui-color-text);
+  }
+
+  input[type="checkbox"] + .image {
+    opacity: 0.65;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  input[type="checkbox"]:disabled:not(:checked) + .image,
+  input[type="checkbox"]:disabled:checked + .image {
+    opacity: 0.25;
+  }
+
+  /* accessibility */
+  [type="checkbox"]:focus + .image:before {
+    outline: 1px dotted currentColor;
+  }
+}
+.image-checkbox-border {
+  border: 1px solid var(--iui-color-text-disabled);
+  background-color: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  padding: 1px 3px 0 2px;
+}

package/lib/core-react/index.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./style/index";
+
+@forward "./_scrollbar";
+@forward "./_z-index";
+@forward "./_geometry";
+@forward "./_math";
+@forward "./_typography";
+
+@forward "./base/index";
+@forward "./icons/index";
+@forward "./inputs/index";
+@forward "./loading/index";
+@forward "./tabs/index";
+@forward "./text/index";

package/lib/core-react/inputs/Input.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module Inputs
+ */
+import * as React from "react";
+import type { CommonProps } from "../utils/Props.js";
+/** Properties for the [[Input]] component
+ * @internal
+ */
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {
+    /** Indicates whether to set focus to the input element */
+    setFocus?: boolean;
+    /** Native keydown event handler */
+    nativeKeyHandler?: (e: KeyboardEvent) => void;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
+ * @internal
+ */
+export declare const Input: (props: InputProps) => React.ReactNode;
+//# sourceMappingURL=Input.d.ts.map

package/lib/core-react/inputs/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAEjD,WAAW;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAsDD;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAA2B,CAAC"}

package/lib/core-react/inputs/Input.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { Input as ITwinUI_Input } from "@itwin/itwinui-react";
+import { useRefs } from "../utils/hooks/useRefs.js";
+// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
+const ForwardRefInput = React.forwardRef(function ForwardRefInput(props, ref) {
+    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    React.useEffect(() => {
+        const currentElement = inputElementRef.current;
+        const currentHandler = nativeKeyHandler;
+        if (currentElement && currentHandler) {
+            currentElement.addEventListener("keydown", currentHandler);
+        }
+        return () => {
+            if (currentHandler && currentElement) {
+                currentElement.removeEventListener("keydown", currentHandler);
+            }
+        };
+    }, [nativeKeyHandler]);
+    React.useEffect(() => {
+        if (inputElementRef.current && setFocus)
+            inputElementRef.current.focus();
+    }, [setFocus]);
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    return (React.createElement(ITwinUI_Input, { ref: refs, type: "text", ...otherProps, onFocus: handleFocus, className: classnames("uicore-inputs-input", className), style: style }));
+});
+/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
+ * @internal
+ */
+export const Input = ForwardRefInput;
+//# sourceMappingURL=Input.js.map

package/lib/core-react/inputs/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAkBpD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,IAAI,EACJ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,OAAO,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,uGAAuG;IAEnJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE,CAAC;YACrC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE,CAAC;gBACrC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;YAChE,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YAAE,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC3E,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,KAAyC,EAAE,EAAE;QAC5C,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,IAAI,EACT,IAAI,EAAC,MAAM,KACP,UAAU,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,EACvD,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAA2C,eAAe,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\nimport { useRefs } from \"../utils/hooks/useRefs.js\";\nimport type { CommonProps } from \"../utils/Props.js\";\n\n/** Properties for the [[Input]] component\n * @internal\n */\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Native keydown event handler */\n  nativeKeyHandler?: (e: KeyboardEvent) => void;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function ForwardRefInput(props, ref) {\n    const {\n      className,\n      style,\n      setFocus,\n      nativeKeyHandler,\n      size,\n      ...otherProps\n    } = props;\n    const inputElementRef = React.useRef<HTMLInputElement>(null);\n    const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n\n    React.useEffect(() => {\n      const currentElement = inputElementRef.current;\n      const currentHandler = nativeKeyHandler;\n\n      if (currentElement && currentHandler) {\n        currentElement.addEventListener(\"keydown\", currentHandler);\n      }\n      return () => {\n        if (currentHandler && currentElement) {\n          currentElement.removeEventListener(\"keydown\", currentHandler);\n        }\n      };\n    }, [nativeKeyHandler]);\n\n    React.useEffect(() => {\n      if (inputElementRef.current && setFocus) inputElementRef.current.focus();\n    }, [setFocus]);\n\n    const handleFocus = React.useCallback(\n      (event: React.FocusEvent<HTMLInputElement>) => {\n        event.currentTarget.select();\n      },\n      []\n    );\n\n    return (\n      <ITwinUI_Input\n        ref={refs}\n        type=\"text\"\n        {...otherProps}\n        onFocus={handleFocus}\n        className={classnames(\"uicore-inputs-input\", className)}\n        style={style}\n      />\n    );\n  }\n);\n\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\n * @internal\n */\nexport const Input: (props: InputProps) => React.ReactNode = ForwardRefInput;\n"]}