@itwin/imodel-components-react 4.0.0-dev.1 → 4.0.0-dev.10

package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.scss

@@ -1,107 +1,107 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/base/base";
-
-.component-quantity-number-input-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-
-  .component-quantity-number-input-suffix {
-    padding-left: .25em;
-  }
-
-  .component-quantity-number-input-value-and-buttons-container {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-
-    input {
-      margin: 0;
-      padding-right: 1.5em;
-    }
-
-    &.component-number-buttons-for-touch {
-      input {
-        padding-right: 3.5em;
-      }
-    }
-
-    .component-quantity-number-input-buttons-container {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 20px;
-      height: 22px;
-      padding-top: 1.5px;
-      @include uicore-centered;
-      flex-direction: column;
-
-      .component-quantity-number-input-button {
-        font-size: 8px;
-        outline: none;
-        height: 100%;
-        width: 100%;
-        @include uicore-centered;
-
-        &:hover {
-          color: $buic-foreground-primary-tone;
-          transition-duration: 150ms;
-        }
-
-        &.component-quantity-number-input-button-up {
-          padding-top: 1px;
-        }
-
-        &.component-quantity-number-input-button-down {
-          padding-top: 1px;
-        }
-      }
-
-      &.component-number-buttons-for-touch {
-        width: 3.5em;
-        flex-direction: row-reverse;
-
-        .component-quantity-number-input-button {
-          font-size: 1em;
-
-          &:hover {
-            color: unset;
-            transition-duration: unset;
-          }
-
-          &.component-quantity-number-input-button-up {
-            padding-top: 2px;
-          }
-
-          &.component-quantity-number-input-button-down {
-            padding-top: 2px;
-          }
-        }
-      }
-    }
-  }
-
-  &.component-quantity-number-input-disabled {
-    .component-quantity-number-input-suffix {
-      -webkit-user-select: none;
-      user-select: none;
-      color: $buic-foreground-disabled;
-    }
-    .component-quantity-number-input-button-up {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-
-    .component-quantity-number-input-button-down {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+
+.component-quantity-number-input-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  .component-quantity-number-input-suffix {
+    padding-left: .25em;
+  }
+
+  .component-quantity-number-input-value-and-buttons-container {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    input {
+      margin: 0;
+      padding-right: 1.5em;
+    }
+
+    &.component-number-buttons-for-touch {
+      input {
+        padding-right: 3.5em;
+      }
+    }
+
+    .component-quantity-number-input-buttons-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 20px;
+      height: 22px;
+      padding-top: 1.5px;
+      @include uicore-centered;
+      flex-direction: column;
+
+      .component-quantity-number-input-button {
+        font-size: 8px;
+        outline: none;
+        height: 100%;
+        width: 100%;
+        @include uicore-centered;
+
+        &:hover {
+          color: $buic-foreground-primary-tone;
+          transition-duration: 150ms;
+        }
+
+        &.component-quantity-number-input-button-up {
+          padding-top: 1px;
+        }
+
+        &.component-quantity-number-input-button-down {
+          padding-top: 1px;
+        }
+      }
+
+      &.component-number-buttons-for-touch {
+        width: 3.5em;
+        flex-direction: row-reverse;
+
+        .component-quantity-number-input-button {
+          font-size: 1em;
+
+          &:hover {
+            color: unset;
+            transition-duration: unset;
+          }
+
+          &.component-quantity-number-input-button-up {
+            padding-top: 2px;
+          }
+
+          &.component-quantity-number-input-button-down {
+            padding-top: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  &.component-quantity-number-input-disabled {
+    .component-quantity-number-input-suffix {
+      -webkit-user-select: none;
+      user-select: none;
+      color: $buic-foreground-disabled;
+    }
+    .component-quantity-number-input-button-up {
+      pointer-events: none;
+      color: $buic-foreground-disabled;
+    }
+
+    .component-quantity-number-input-button-down {
+      pointer-events: none;
+      color: $buic-foreground-disabled;
+    }
+  }
+}

package/lib/esm/imodel-components-react/lineweight/Swatch.d.ts

@@ -1,34 +1,34 @@
-/** @packageDocumentation
- * @module LineWeight
- */
-import "./Swatch.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[LineWeightSwatch]] React component
- * @public
- */
-export interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** color specification */
-    weight: number;
-    /** color specification */
-    colorDef?: ColorDef;
-    /** hide the weight label */
-    hideLabel?: boolean;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** function to run when user selects a line weight swatch */
-    onClick?: () => void;
-}
-/** LineWeightSwatch Functional component
- * @public
- */
-export declare class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {
-    /** @internal */
-    constructor(props: LineWeightSwatchProps);
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module LineWeight
+ */
+import "./Swatch.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[LineWeightSwatch]] React component
+ * @public
+ */
+export interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** color specification */
+    weight: number;
+    /** color specification */
+    colorDef?: ColorDef;
+    /** hide the weight label */
+    hideLabel?: boolean;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** function to run when user selects a line weight swatch */
+    onClick?: () => void;
+}
+/** LineWeightSwatch Functional component
+ * @public
+ */
+export declare class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {
+    /** @internal */
+    constructor(props: LineWeightSwatchProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=Swatch.d.ts.map

package/lib/esm/imodel-components-react/lineweight/Swatch.js

@@ -1,60 +1,60 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module LineWeight
- */
-import "./Swatch.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { getCSSColorFromDef } from "../color/getCSSColorFromDef";
-/** LineWeightSwatch Functional component
- * @public
- */
-export class LineWeightSwatch extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-    }
-    componentDidMount() {
-        // eslint-disable-next-line no-console
-        // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? "set" : "unset"}`);
-    }
-    render() {
-        const { onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props
-        // eslint-disable-next-line comma-dangle
-        disabled, readonly, ...otherProps // pass-through props
-         } = this.props;
-        let rgbaString = "";
-        if (colorDef) {
-            rgbaString = getCSSColorFromDef(colorDef);
-        }
-        const buttonStyle = colorDef ?
-            {
-                ...this.props.style,
-                color: rgbaString,
-            } :
-            {
-                ...this.props.style,
-            };
-        const svgStyle = colorDef ?
-            {
-                height: `${weight}px`,
-                background: rgbaString,
-            } :
-            {
-                height: `${weight}px`,
-            };
-        const handleClick = (_e) => {
-            // istanbul ignore else
-            if (onClick)
-                onClick();
-        };
-        const classes = classnames("components-lineweight-swatch", hideLabel && "hide-label", readonly && "readonly", className);
-        return (React.createElement("button", { ...otherProps, style: buttonStyle, className: classes, onClick: handleClick, disabled: disabled },
-            !hideLabel && React.createElement("span", null, weight.toFixed(0)),
-            React.createElement("div", { style: svgStyle })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module LineWeight
+ */
+import "./Swatch.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { getCSSColorFromDef } from "../color/getCSSColorFromDef";
+/** LineWeightSwatch Functional component
+ * @public
+ */
+export class LineWeightSwatch extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        // eslint-disable-next-line no-console
+        // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? "set" : "unset"}`);
+    }
+    render() {
+        const { onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props
+        // eslint-disable-next-line comma-dangle
+        disabled, readonly, ...otherProps // pass-through props
+         } = this.props;
+        let rgbaString = "";
+        if (colorDef) {
+            rgbaString = getCSSColorFromDef(colorDef);
+        }
+        const buttonStyle = colorDef ?
+            {
+                ...this.props.style,
+                color: rgbaString,
+            } :
+            {
+                ...this.props.style,
+            };
+        const svgStyle = colorDef ?
+            {
+                height: `${weight}px`,
+                background: rgbaString,
+            } :
+            {
+                height: `${weight}px`,
+            };
+        const handleClick = (_e) => {
+            // istanbul ignore else
+            if (onClick)
+                onClick();
+        };
+        const classes = classnames("components-lineweight-swatch", hideLabel && "hide-label", readonly && "readonly", className);
+        return (React.createElement("button", { ...otherProps, style: buttonStyle, className: classes, onClick: handleClick, disabled: disabled },
+            !hideLabel && React.createElement("span", null, weight.toFixed(0)),
+            React.createElement("div", { style: svgStyle })));
+    }
+}
 //# sourceMappingURL=Swatch.js.map

package/lib/esm/imodel-components-react/lineweight/Swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/lineweight/Swatch.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAoBjE;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9E,gBAAgB;IAChB,YAAY,KAA4B;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,iBAAiB;QAC/B,sCAAsC;QACtC,iLAAiL;IACnL,CAAC;IAEe,MAAM;QACpB,MAAM,EACJ,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,6CAA6C;QAC9F,wCAAwC;QACxC,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,qBAAqB;UACxD,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,IAAI,UAAU,GAAG,EAAE,CAAC;QAEpB,IAAI,QAAQ,EAAE;YACZ,UAAU,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC;SAC3C;QAED,MAAM,WAAW,GAAwB,QAAQ,CAAC,CAAC;YACjD;gBACE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;gBACnB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;YACH;gBACE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;aACpB,CAAC;QAEJ,MAAM,QAAQ,GAAwB,QAAQ,CAAC,CAAC;YAC9C;gBACE,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,UAAU,EAAE,UAAU;aACvB,CAAC,CAAC;YACH;gBACE,MAAM,EAAE,GAAG,MAAM,IAAI;aACtB,CAAC;QAEJ,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,uBAAuB;YACvB,IAAI,OAAO;gBACT,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CACxB,8BAA8B,EAC9B,SAAS,IAAI,YAAY,EACzB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;QAEF,OAAO,CACL,mCAAY,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ;YACrG,CAAC,SAAS,IAAI,kCAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC/C,6BAAK,KAAK,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module LineWeight\r\n */\r\n\r\nimport \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"../color/getCSSColorFromDef\";\r\n\r\n/** Properties for the [[LineWeightSwatch]] React component\r\n * @public\r\n */\r\nexport interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** color specification */\r\n  weight: number;\r\n  /** color specification */\r\n  colorDef?: ColorDef;\r\n  /** hide the weight label */\r\n  hideLabel?: boolean;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** function to run when user selects a line weight swatch */\r\n  onClick?: () => void;\r\n}\r\n\r\n/** LineWeightSwatch Functional component\r\n * @public\r\n */\r\nexport class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {\r\n  /** @internal */\r\n  constructor(props: LineWeightSwatchProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    // eslint-disable-next-line no-console\r\n    // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? \"set\" : \"unset\"}`);\r\n  }\r\n\r\n  public override render() {\r\n    const {\r\n      onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props\r\n      // eslint-disable-next-line comma-dangle\r\n      disabled, readonly, ...otherProps // pass-through props\r\n    } = this.props;\r\n\r\n    let rgbaString = \"\";\r\n\r\n    if (colorDef) {\r\n      rgbaString = getCSSColorFromDef(colorDef);\r\n    }\r\n\r\n    const buttonStyle: React.CSSProperties = colorDef ?\r\n      {\r\n        ...this.props.style,\r\n        color: rgbaString,\r\n      } :\r\n      {\r\n        ...this.props.style,\r\n      };\r\n\r\n    const svgStyle: React.CSSProperties = colorDef ?\r\n      {\r\n        height: `${weight}px`,\r\n        background: rgbaString,\r\n      } :\r\n      {\r\n        height: `${weight}px`,\r\n      };\r\n\r\n    const handleClick = (_e: React.MouseEvent) => {\r\n      // istanbul ignore else\r\n      if (onClick)\r\n        onClick();\r\n    };\r\n\r\n    const classes = classnames(\r\n      \"components-lineweight-swatch\",\r\n      hideLabel && \"hide-label\",\r\n      readonly && \"readonly\",\r\n      className,\r\n    );\r\n\r\n    return (\r\n      <button {...otherProps} style={buttonStyle} className={classes} onClick={handleClick} disabled={disabled}>\r\n        {!hideLabel && <span>{weight.toFixed(0)}</span>}\r\n        <div style={svgStyle} />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/lineweight/Swatch.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAoBjE;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9E,gBAAgB;IAChB,YAAY,KAA4B;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,iBAAiB;QAC/B,sCAAsC;QACtC,iLAAiL;IACnL,CAAC;IAEe,MAAM;QACpB,MAAM,EACJ,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,6CAA6C;QAC9F,wCAAwC;QACxC,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,qBAAqB;UACxD,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,IAAI,UAAU,GAAG,EAAE,CAAC;QAEpB,IAAI,QAAQ,EAAE;YACZ,UAAU,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC;SAC3C;QAED,MAAM,WAAW,GAAwB,QAAQ,CAAC,CAAC;YACjD;gBACE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;gBACnB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;YACH;gBACE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;aACpB,CAAC;QAEJ,MAAM,QAAQ,GAAwB,QAAQ,CAAC,CAAC;YAC9C;gBACE,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,UAAU,EAAE,UAAU;aACvB,CAAC,CAAC;YACH;gBACE,MAAM,EAAE,GAAG,MAAM,IAAI;aACtB,CAAC;QAEJ,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,uBAAuB;YACvB,IAAI,OAAO;gBACT,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CACxB,8BAA8B,EAC9B,SAAS,IAAI,YAAY,EACzB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;QAEF,OAAO,CACL,mCAAY,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ;YACrG,CAAC,SAAS,IAAI,kCAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC/C,6BAAK,KAAK,EAAE,QAAQ,GAAI,CACjB,CACV,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 LineWeight\n */\n\nimport \"./Swatch.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"../color/getCSSColorFromDef\";\n\n/** Properties for the [[LineWeightSwatch]] React component\n * @public\n */\nexport interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** color specification */\n  weight: number;\n  /** color specification */\n  colorDef?: ColorDef;\n  /** hide the weight label */\n  hideLabel?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** function to run when user selects a line weight swatch */\n  onClick?: () => void;\n}\n\n/** LineWeightSwatch Functional component\n * @public\n */\nexport class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {\n  /** @internal */\n  constructor(props: LineWeightSwatchProps) {\n    super(props);\n  }\n\n  public override componentDidMount() {\n    // eslint-disable-next-line no-console\n    // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? \"set\" : \"unset\"}`);\n  }\n\n  public override render() {\n    const {\n      onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props\n      // eslint-disable-next-line comma-dangle\n      disabled, readonly, ...otherProps // pass-through props\n    } = this.props;\n\n    let rgbaString = \"\";\n\n    if (colorDef) {\n      rgbaString = getCSSColorFromDef(colorDef);\n    }\n\n    const buttonStyle: React.CSSProperties = colorDef ?\n      {\n        ...this.props.style,\n        color: rgbaString,\n      } :\n      {\n        ...this.props.style,\n      };\n\n    const svgStyle: React.CSSProperties = colorDef ?\n      {\n        height: `${weight}px`,\n        background: rgbaString,\n      } :\n      {\n        height: `${weight}px`,\n      };\n\n    const handleClick = (_e: React.MouseEvent) => {\n      // istanbul ignore else\n      if (onClick)\n        onClick();\n    };\n\n    const classes = classnames(\n      \"components-lineweight-swatch\",\n      hideLabel && \"hide-label\",\n      readonly && \"readonly\",\n      className,\n    );\n\n    return (\n      <button {...otherProps} style={buttonStyle} className={classes} onClick={handleClick} disabled={disabled}>\n        {!hideLabel && <span>{weight.toFixed(0)}</span>}\n        <div style={svgStyle} />\n      </button>\n    );\n  }\n}\n"]}

package/lib/esm/imodel-components-react/lineweight/Swatch.scss

@@ -1,49 +1,48 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-.components-lineweight-swatch {
-  font-size: $iui-font-size;
-  color: $buic-foreground-body;
-  border: none;
-  background: inherit;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 3px 15px 3px 0;
-  min-height: 22px;
-  box-sizing: border-box;
-
-  // remove inner focus ring that is specific to Firefox.
-  &::-moz-focus-inner {
-    border: 0px;
-  }
-
-  &:focus {
-    outline: 1px solid $buic-row-selection;
-  }
-
-  &[disabled] {
-    opacity: .2;
-    cursor: default;
-  }
-
-  >span {
-    width: 1.5em;
-    text-align: right;
-  }
-
-  >div {
-    flex: 1;
-    background: $buic-foreground-body;
-    margin-left: 15px;
-  }
-}
-
-.components-lineweight-swatch.hide-label>span {
-  display: none;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.components-lineweight-swatch {
+  font-size: var(--iui-font-size-1);
+  color: $buic-foreground-body;
+  border: none;
+  background: inherit;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 3px 15px 3px 0;
+  min-height: 22px;
+  box-sizing: border-box;
+
+  // remove inner focus ring that is specific to Firefox.
+  &::-moz-focus-inner {
+    border: 0px;
+  }
+
+  &:focus {
+    outline: 1px solid $buic-row-selection;
+  }
+
+  &[disabled] {
+    opacity: 0.2;
+    cursor: default;
+  }
+
+  > span {
+    width: 1.5em;
+    text-align: right;
+  }
+
+  > div {
+    flex: 1;
+    background: $buic-foreground-body;
+    margin-left: 15px;
+  }
+}
+
+.components-lineweight-swatch.hide-label > span {
+  display: none;
+}

package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.d.ts

@@ -1,61 +1,61 @@
-/** @packageDocumentation
- * @module LineWeight
- */
-import "./WeightPickerButton.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[WeightPickerButton]] React component
- * @public
- */
-export interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** active weight */
-    activeWeight: number;
-    /** available weights */
-    weights: number[];
-    /** color specification */
-    colorDef?: ColorDef;
-    /** function to run when user selects weight swatch */
-    onLineWeightPick?: ((weight: number) => void) | undefined;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** hide the weight label */
-    hideLabel?: boolean;
-    /** Title to show at top of DropDown */
-    dropDownTitle?: string;
-}
-/** @internal */
-interface WeightPickerState {
-    showPopup: boolean;
-    targetElement: HTMLDivElement | null;
-}
-/** WeightPickerButton component
- * @public
- */
-export declare class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {
-    private _target;
-    private _weightsContainer;
-    private _focusTarget;
-    /** @internal */
-    constructor(props: WeightPickerProps);
-    setFocus(): void;
-    static defaultProps: {
-        weights: number[];
-    };
-    private _togglePopup;
-    private _onPopupOpened;
-    private _closePopup;
-    private _handleWeightPicked;
-    componentDidMount(): void;
-    private buildIdForWeight;
-    private moveFocusInPopup;
-    private _handleKeyDown;
-    private _setWeightContainer;
-    private renderPopup;
-    /** @internal */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module LineWeight
+ */
+import "./WeightPickerButton.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[WeightPickerButton]] React component
+ * @public
+ */
+export interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** active weight */
+    activeWeight: number;
+    /** available weights */
+    weights: number[];
+    /** color specification */
+    colorDef?: ColorDef;
+    /** function to run when user selects weight swatch */
+    onLineWeightPick?: ((weight: number) => void) | undefined;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** hide the weight label */
+    hideLabel?: boolean;
+    /** Title to show at top of DropDown */
+    dropDownTitle?: string;
+}
+/** @internal */
+interface WeightPickerState {
+    showPopup: boolean;
+    targetElement: HTMLDivElement | null;
+}
+/** WeightPickerButton component
+ * @public
+ */
+export declare class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {
+    private _target;
+    private _weightsContainer;
+    private _focusTarget;
+    /** @internal */
+    constructor(props: WeightPickerProps);
+    setFocus(): void;
+    static defaultProps: {
+        weights: number[];
+    };
+    private _togglePopup;
+    private _onPopupOpened;
+    private _closePopup;
+    private _handleWeightPicked;
+    componentDidMount(): void;
+    private buildIdForWeight;
+    private moveFocusInPopup;
+    private _handleKeyDown;
+    private _setWeightContainer;
+    private renderPopup;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=WeightPickerButton.d.ts.map