@instructure/ui-byline 11.7.2-snapshot-21 → 11.7.2-snapshot-22

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.2-snapshot-21](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-21) (2026-04-01)
+## [11.7.2-snapshot-22](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-22) (2026-04-01)
 
-**Note:** Version bump only for package @instructure/ui-byline
+
+### Features
+
+* **ui-byline:** rework Byline ([066524f](https://github.com/instructure/instructure-ui/commit/066524ff00c2417b29ac4bd9716f559c023f503e))
 
 
 

package/es/Byline/v2/index.js

@@ -0,0 +1,86 @@
+var _dec, _class, _Byline;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { omitProps } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let Byline = (_dec = withStyle(generateStyle), _dec(_class = (_Byline = class Byline extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5, _this$props$styles6;
+    const passthroughProps = View.omitViewProps(omitProps(this.props, Byline.allowedProps), Byline);
+    return _jsxs(View, {
+      ...passthroughProps,
+      elementRef: this.handleRef,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.byline,
+      margin: this.props.margin,
+      maxWidth: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.maxWidth,
+      children: [_jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.figure,
+        children: this.props.children
+      }), _jsxs("div", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.caption,
+        children: [this.props.title && _jsx("span", {
+          css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.title,
+          children: this.props.title
+        }), this.props.description && _jsx("div", {
+          css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.description,
+          children: this.props.description
+        })]
+      })]
+    });
+  }
+}, _Byline.displayName = "Byline", _Byline.componentId = 'Byline', _Byline.allowedProps = allowedProps, _Byline.defaultProps = {
+  alignContent: 'center'
+}, _Byline)) || _class);
+export default Byline;
+export { Byline };

package/es/Byline/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['alignContent', 'children', 'description', 'elementRef', 'margin', 'size', 'title'];
+export { allowedProps };

package/es/Byline/v2/styles.js

@@ -0,0 +1,105 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, _sharedTokens) => {
+  const alignContent = params.alignContent,
+    size = params.size;
+  const widthSizeVariants = {
+    small: String(componentTheme.small),
+    medium: String(componentTheme.medium),
+    large: String(componentTheme.large)
+  };
+  const widthSizeVariant = widthSizeVariants[size];
+  const alignContentVariants = {
+    top: {
+      alignItems: 'flex-start'
+    },
+    center: {
+      alignItems: 'center'
+    }
+  };
+  const bylineStyles = {
+    display: 'flex',
+    background: componentTheme.background,
+    margin: 0,
+    padding: 0,
+    fontFamily: componentTheme.fontFamily,
+    ...alignContentVariants[alignContent]
+  };
+  const captionStyles = {
+    color: componentTheme.color,
+    margin: 0,
+    padding: 0
+  };
+  return {
+    byline: {
+      label: 'byline',
+      ...bylineStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figure)': bylineStyles,
+      '&:-webkit-any(figure)': bylineStyles
+    },
+    figure: {
+      label: 'byline__figure',
+      marginInlineStart: 0,
+      marginInlineEnd: componentTheme.figureMargin
+    },
+    caption: {
+      label: 'byline__caption',
+      ...captionStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figcaption)': captionStyles,
+      '&:-webkit-any(figcaption)': captionStyles
+    },
+    title: {
+      label: 'byline__title',
+      textRendering: 'optimizeLegibility',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      display: 'block',
+      margin: componentTheme.titleMargin,
+      fontSize: componentTheme.titleFontSize,
+      fontWeight: componentTheme.titleFontWeight,
+      lineHeight: componentTheme.titleLineHeight
+    },
+    description: {
+      label: 'byline__description',
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      fontWeight: componentTheme.descriptionFontWeight
+    },
+    maxWidth: widthSizeVariant
+  };
+};
+export default generateStyle;

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Byline } from "../Byline/v2/index.js";

package/lib/Byline/v2/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Byline = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _latest = require("@instructure/ui-view/latest");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Byline;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let Byline = exports.Byline = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Byline = class Byline extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5, _this$props$styles6;
+    const passthroughProps = _latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Byline.allowedProps), Byline);
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ...passthroughProps,
+      elementRef: this.handleRef,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.byline,
+      margin: this.props.margin,
+      maxWidth: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.maxWidth,
+      children: [(0, _jsxRuntime.jsx)("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.figure,
+        children: this.props.children
+      }), (0, _jsxRuntime.jsxs)("div", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.caption,
+        children: [this.props.title && (0, _jsxRuntime.jsx)("span", {
+          css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.title,
+          children: this.props.title
+        }), this.props.description && (0, _jsxRuntime.jsx)("div", {
+          css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.description,
+          children: this.props.description
+        })]
+      })]
+    });
+  }
+}, _Byline.displayName = "Byline", _Byline.componentId = 'Byline', _Byline.allowedProps = _props.allowedProps, _Byline.defaultProps = {
+  alignContent: 'center'
+}, _Byline)) || _class);
+var _default = exports.default = Byline;

package/lib/Byline/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['alignContent', 'children', 'description', 'elementRef', 'margin', 'size', 'title'];

package/lib/Byline/v2/styles.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, _sharedTokens) => {
+  const alignContent = params.alignContent,
+    size = params.size;
+  const widthSizeVariants = {
+    small: String(componentTheme.small),
+    medium: String(componentTheme.medium),
+    large: String(componentTheme.large)
+  };
+  const widthSizeVariant = widthSizeVariants[size];
+  const alignContentVariants = {
+    top: {
+      alignItems: 'flex-start'
+    },
+    center: {
+      alignItems: 'center'
+    }
+  };
+  const bylineStyles = {
+    display: 'flex',
+    background: componentTheme.background,
+    margin: 0,
+    padding: 0,
+    fontFamily: componentTheme.fontFamily,
+    ...alignContentVariants[alignContent]
+  };
+  const captionStyles = {
+    color: componentTheme.color,
+    margin: 0,
+    padding: 0
+  };
+  return {
+    byline: {
+      label: 'byline',
+      ...bylineStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figure)': bylineStyles,
+      '&:-webkit-any(figure)': bylineStyles
+    },
+    figure: {
+      label: 'byline__figure',
+      marginInlineStart: 0,
+      marginInlineEnd: componentTheme.figureMargin
+    },
+    caption: {
+      label: 'byline__caption',
+      ...captionStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figcaption)': captionStyles,
+      '&:-webkit-any(figcaption)': captionStyles
+    },
+    title: {
+      label: 'byline__title',
+      textRendering: 'optimizeLegibility',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      display: 'block',
+      margin: componentTheme.titleMargin,
+      fontSize: componentTheme.titleFontSize,
+      fontWeight: componentTheme.titleFontWeight,
+      lineHeight: componentTheme.titleLineHeight
+    },
+    description: {
+      label: 'byline__description',
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      fontWeight: componentTheme.descriptionFontWeight
+    },
+    maxWidth: widthSizeVariant
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Byline", {
+  enumerable: true,
+  get: function () {
+    return _v.Byline;
+  }
+});
+var _v = require("../Byline/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-byline",
-  "version": "11.7.2-snapshot-21",
+  "version": "11.7.2-snapshot-22",
   "description": "A Byline component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,19 +15,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.7.2-snapshot-21",
-    "@instructure/shared-types": "11.7.2-snapshot-21",
-    "@instructure/ui-react-utils": "11.7.2-snapshot-21",
-    "@instructure/ui-view": "11.7.2-snapshot-21"
+    "@instructure/emotion": "11.7.2-snapshot-22",
+    "@instructure/ui-react-utils": "11.7.2-snapshot-22",
+    "@instructure/shared-types": "11.7.2-snapshot-22",
+    "@instructure/ui-view": "11.7.2-snapshot-22"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.2-snapshot-21",
-    "@instructure/ui-babel-preset": "11.7.2-snapshot-21",
-    "@instructure/ui-themes": "11.7.2-snapshot-21",
-    "@instructure/ui-color-utils": "11.7.2-snapshot-21"
+    "@instructure/ui-axe-check": "11.7.2-snapshot-22",
+    "@instructure/ui-babel-preset": "11.7.2-snapshot-22",
+    "@instructure/ui-color-utils": "11.7.2-snapshot-22",
+    "@instructure/ui-themes": "11.7.2-snapshot-22"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -57,18 +57,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     }
   },
   "scripts": {

package/src/Byline/v2/README.md

@@ -0,0 +1,59 @@
+---
+describes: Byline
+---
+
+A byline component with a visual and a caption:
+
+```js
+---
+type: example
+---
+<Byline description={lorem.sentence()}>
+  <Avatar name="Julia Childer" />
+</Byline>
+```
+
+Create a heading by using the `title` prop, and add space around the Byline
+component via the `margin` prop. To constrain the component's width, use
+the `size` prop.
+
+You can also adjust the alignment of the visual object with the descriptive text by
+setting the `alignContent` prop.
+
+```js
+---
+type: example
+---
+<Byline
+  margin="x-large auto"
+  size="small"
+  alignContent="top"
+  title="Graham Taylor"
+  description={lorem.paragraph()}
+>
+  <Avatar name="Graham Taylor" />
+</Byline>
+```
+
+```js
+---
+type: example
+---
+<Byline
+  description={
+    <View display="block" margin="0 0 0 x-small">
+      <Heading level="h2">
+        <Link href="#">Clickable Heading</Link>
+      </Heading>
+      <Text
+        size="x-small"
+        transform="uppercase"
+        letterSpacing="expanded"
+      >
+        Something here
+      </Text>
+    </View>
+  }>
+  <HeartInstUIIcon size="medium" color="successColor" />
+</Byline>
+```