@atlaskit/flag 14.7.3 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/flag
 
+## 15.0.0
+
+### Major Changes
+
+- [`f7b2dbd6eba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7b2dbd6eba) - BREAKING CHANGE: We have removed support for legacy light and dark themes. Previously, Flag used the `useGlobalTheme` hook to detect 'light' or 'dark' modes and apply suitable styles accordingly. This functionality has been removed in favor of supporting token-based light and dark themes as well as including fallbacks for non-token environments.
+
+  Other changes include:
+
+  - Flag shadow is now the same across normal and bold flags and has been made consistent with overlay shadows in other components.
+  - Dismiss button is better aligned within the Flag and has a more consistent hit target.
+  - Flag icon is better aligned with content.
+  - Internal change to the way styles are applied.
+
+### Patch Changes
+
+- [`a1af6f8bb99`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1af6f8bb99) - Fixes a regression that could cause Flag description or actions to display incorrectly or not at all.
+- [`373f54c8212`](https://bitbucket.org/atlassian/atlassian-frontend/commits/373f54c8212) - Fixed an issue where Flag title or description could overflow its container if a single word exceeded the length of the container (for example, long filenames).
+- [`bbd4e296a68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bbd4e296a68) - Fixes a regression that could cause Flag description or actions to display incorrectly or not at all.
+- Updated dependencies
+
 ## 14.7.3
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.7.3";
+var packageVersion = "15.0.0";
 var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/cjs/flag-actions.js

@@ -11,6 +11,8 @@ var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _constants2 = require("./constants");
@@ -21,26 +23,8 @@ var _theme = require("./theme");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var separatorWidth = gridSize * 2;
-var defaultAppearanceTranslate = gridSize / 4;
-var separatorStyles = (0, _react.css)({
-  display: 'inline-block',
-  width: separatorWidth,
-  textAlign: 'center'
-});
-var actionContainerStyles = (0, _react.css)({
-  display: 'flex',
-  paddingTop: gridSize,
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
-});
-var boldActionContainerStyles = (0, _react.css)({
-  transform: 0
-});
 var buttonStyles = (0, _react.css)({
   '&&, a&&': {
-    marginLeft: 0,
     padding: "0 ".concat(gridSize, "px !important"),
     background: "var(--bg-color)",
     color: "var(--color) !important",
@@ -53,16 +37,11 @@ var buttonStyles = (0, _react.css)({
     textDecoration: 'underline'
   }
 });
-var appeanceNormalButtonStyles = (0, _react.css)({
+var appearanceNormalButtonStyles = (0, _react.css)({
   '&&, a&&': {
     padding: '0 !important'
   }
 });
-var isBoldButtonStyles = (0, _react.css)({
-  '&&, a&&': {
-    marginRight: gridSize
-  }
-});
 
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
@@ -70,7 +49,6 @@ var FlagActions = function FlagActions(props) {
       _props$actions = props.actions,
       actions = _props$actions === void 0 ? [] : _props$actions,
       linkComponent = props.linkComponent,
-      mode = props.mode,
       testId = props.testId;
 
   if (!actions.length) {
@@ -78,14 +56,17 @@ var FlagActions = function FlagActions(props) {
   }
 
   var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
-  return (0, _react.jsx)("div", {
-    css: [actionContainerStyles, isBold && boldActionContainerStyles],
-    "data-testid": testId && "".concat(testId, "-actions")
+  return (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
+    gap: "scale.100",
+    flexWrap: "wrap",
+    alignItems: "center",
+    divider: isBold ? null : '·',
+    UNSAFE_style: isBold ? undefined : {
+      transform: "translateX(-2px)"
+    },
+    testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
-    return [index && !isBold ? (0, _react.jsx)("div", {
-      css: separatorStyles,
-      key: index + 0.5
-    }, "\xB7") : '', (0, _react.jsx)(_customThemeButton.default, {
+    return (0, _react.jsx)(_customThemeButton.default, {
       onClick: action.onClick,
       href: action.href,
       target: action.target,
@@ -95,12 +76,12 @@ var FlagActions = function FlagActions(props) {
       testId: action.testId,
       key: index,
       style: {
-        '--color': (0, _theme.getActionColor)(appearance, mode),
-        '--bg-color': (0, _theme.getActionBackground)(appearance, mode),
-        '--focus-color': (0, _theme.getFlagFocusRingColor)(appearance, mode)
+        '--color': _theme.actionTextColor[appearance],
+        '--bg-color': _theme.actionBackgroundColor[appearance],
+        '--focus-color': _theme.flagFocusRingColor[appearance]
       },
-      css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
-    }, action.content)];
+      css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
+    }, action.content);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/flag-group.js

@@ -8,14 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.flagWidth = exports.flagAnimationTime = exports.default = exports.FlagGroupContext = void 0;
 exports.useFlagGroup = useFlagGroup;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _motion = require("@atlaskit/motion");
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -51,7 +51,6 @@ function useFlagGroup() {
 
 var baseStyles = (0, _react2.css)({
   width: flagWidth,
-  position: 'absolute',
   bottom: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   '@media (max-width: 560px)': {
@@ -85,7 +84,6 @@ var dismissAllowedStyles = (0, _react2.css)({
   }
 });
 var flagGroupContainerStyles = (0, _react2.css)({
-  position: 'fixed',
   zIndex: _constants.layers.flag(),
   bottom: flagBottom,
   left: flagLeft,
@@ -130,10 +128,16 @@ var FlagGroup = function FlagGroup(props) {
         animationTimingFunction: function animationTimingFunction() {
           return _motion.easeIn;
         }
-      }, function (props) {
-        return (0, _react2.jsx)("div", (0, _extends2.default)({}, props, {
-          css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
-        }), (0, _react2.jsx)(FlagGroupContext.Provider, {
+      }, function (_ref) {
+        var className = _ref.className,
+            ref = _ref.ref;
+        return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+          display: "block",
+          position: "absolute",
+          css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
+          className: className,
+          ref: ref
+        }, (0, _react2.jsx)(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
         }, flag));
@@ -143,7 +147,9 @@ var FlagGroup = function FlagGroup(props) {
 
   return (0, _react2.jsx)(_portal.default, {
     zIndex: _constants.layers.flag()
-  }, (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+    display: "block",
+    position: "fixed",
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(LabelTag, null, label)) : null, (0, _react2.jsx)(_motion.ExitingPersistence, {

package/dist/cjs/flag.js

@@ -17,9 +17,7 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _components = require("@atlaskit/theme/components");
-
-var _constants = require("@atlaskit/theme/constants");
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
@@ -27,7 +25,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 
 var _theme = require("./theme");
 
@@ -44,35 +42,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.3"
-}; // NOT USED
-// const gridSize = getGridSize();
-// const doubleGridSize = gridSize * 2;
-
-var titleGroupStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'start'
-});
-var iconTitleStyles = (0, _react2.css)({
-  display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize / 2}px``
-  paddingTop: "var(--ds-scale-050, 4px)",
-  alignItems: 'start',
-  flex: 1
-});
-var flagHeaderStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  width: '100%',
-  // TODO Delete this comment after verifying spacing token -> previous value `doubleGridSize`
-  padding: "var(--ds-scale-200, 16px)",
-  borderRadius: (0, _constants.borderRadius)()
-});
-var flagContainerStyles = (0, _react2.css)({
-  width: '100%',
-  zIndex: _constants.layers.flag(),
-  borderRadius: (0, _constants.borderRadius)(),
-  transition: 'background-color 200ms'
-});
+  packageVersion: "15.0.0"
+};
 /**
  * __Flag__
  *
@@ -88,7 +59,7 @@ var Flag = function Flag(props) {
   var _props$actions = props.actions,
       actions = _props$actions === void 0 ? [] : _props$actions,
       _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? _constants2.DEFAULT_APPEARANCE : _props$appearance,
+      appearance = _props$appearance === void 0 ? _constants.DEFAULT_APPEARANCE : _props$appearance,
       icon = props.icon,
       title = props.title,
       description = props.description,
@@ -124,7 +95,7 @@ var Flag = function Flag(props) {
     action: 'dismissed',
     analyticsData: analyticsContext
   }, analyticsAttributes));
-  var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
+  var isBold = appearance !== _constants.DEFAULT_APPEARANCE;
   var toggleExpand = (0, _react.useCallback)(function () {
     setIsExpanded(function (previous) {
       return !previous;
@@ -157,42 +128,55 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var boxShadowValue = "0 20px 32px -8px ".concat(_theme.flagShadowColor);
-
-  if (!isBold) {
-    boxShadowValue = "0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadowValue);
-  }
-
-  var boxShadow = "var(--ds-shadow-overlay, ".concat(boxShadowValue, ")");
-
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
-  var textColor = (0, _theme.getFlagTextColor)(appearance, mode);
-  var iconColor = (0, _theme.getFlagIconColor)(appearance, mode);
+  var textColor = _theme.flagTextColor[appearance];
+  var iconColor = _theme.flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    style: {
-      color: textColor,
-      backgroundColor: (0, _theme.getFlagBackgroundColor)(appearance, mode),
-      boxShadow: boxShadow
+  var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+    display: "block",
+    backgroundColor: _theme.flagBackgroundColor[appearance],
+    shadow: "overlay",
+    padding: "scale.200",
+    borderRadius: "normal",
+    overflow: "hidden",
+    layer: "flag",
+    UNSAFE_style: {
+      width: '100%',
+      transition: 'background-color 200ms'
     },
-    css: flagContainerStyles,
     role: "alert",
-    "data-testid": testId
-  }, autoDismissProps), (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("div", {
-    css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    testId: testId
+  }, autoDismissProps), (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
+    gap: "scale.200"
+  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+    alignItems: "start",
+    UNSAFE_style: {
+      color: iconColor,
+      flexShrink: 0
+    }
+  }, icon), (0, _react2.jsx)(_dsExplorations.UNSAFE_Stack, {
+    gap: shouldRenderGap ? 'scale.100' : 'scale.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
     ,
-    tabIndex: 0
-  }, (0, _react2.jsx)("div", {
-    style: {
-      color: iconColor
-    },
-    css: titleGroupStyles
-  }, (0, _react2.jsx)("div", {
-    css: iconTitleStyles
-  }, icon, (0, _react2.jsx)(_internal.Title, {
-    color: textColor
+    UNSAFE_style: {
+      flexGrow: 1,
+      transition: "gap 0.3s"
+    }
+  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
+    gap: "scale.100",
+    justifyContent: "spaceBetween"
+  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+    display: "block",
+    UNSAFE_style: {
+      paddingTop: 2
+    }
+  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
+    color: textColor,
+    fontWeight: "600",
+    UNSAFE_style: {
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    }
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -202,17 +186,23 @@ var Flag = function Flag(props) {
   }) : null), (0, _react2.jsx)(_internal.Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && (0, _react2.jsx)(_internal.Description, {
-    testId: testId && "".concat(testId, "-description"),
+  }, description && (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
+    as: "div",
     color: textColor,
-    isBold: isBold
+    UNSAFE_style: {
+      maxHeight: 100,
+      // height is defined as 5 lines maximum by design
+      overflow: 'auto',
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    },
+    testId: testId && "".concat(testId, "-description")
   }, description), (0, _react2.jsx)(_flagActions.default, {
     actions: actions,
     appearance: appearance,
     linkComponent: linkComponent,
-    testId: testId,
-    mode: mode
-  })))));
+    testId: testId
+  }))))));
 };
 
 var _default = Flag;

package/dist/cjs/internal/dismiss-button.js

@@ -11,49 +11,25 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
 
-var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
-var _constants = require("@atlaskit/theme/constants");
-
-var _components = require("@atlaskit/theme/components");
-
 var _theme = require("../theme");
 
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-var dismissButtonStyles = (0, _react2.css)({
-  marginLeft: gridSize,
-  padding: 0,
-  flex: '0 0 auto',
-  appearance: 'none',
-  background: 'none',
-  border: 'none',
-  borderRadius: borderRadius,
-  cursor: 'pointer',
-  lineHeight: '1',
-  whiteSpace: 'nowrap'
-});
-var crossIconStyles = (0, _react2.css)({
-  paddingTop: "".concat(gridSize, "px")
-});
-
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
       onClick = _ref.onClick,
       isBold = _ref.isBold,
       isExpanded = _ref.isExpanded,
       testId = _ref.testId;
-
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
   var ButtonIcon = _cross.default;
   var buttonLabel = 'Dismiss';
   var size = 'small';
@@ -62,22 +38,33 @@ var DismissButton = function DismissButton(_ref) {
   if (isBold) {
     ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
     buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-    size = 'large';
+    size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
 
-  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", {
-    style: {
-      color: (0, _theme.getFlagTextColor)(appearance, mode)
-    },
-    css: [dismissButtonStyles, !isBold && crossIconStyles],
-    onClick: onClick,
-    "data-testid": buttonTestId,
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+    as: "button",
     type: "button",
-    "aria-expanded": isBold ? isExpanded : undefined
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "none",
+    borderRadius: "normal",
+    padding: "scale.0",
+    width: "size.200",
+    height: "size.200",
+    onClick: onClick,
+    "aria-expanded": isBold ? isExpanded : undefined,
+    UNSAFE_style: {
+      flex: '0 0 auto',
+      background: 'none',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap'
+    },
+    testId: buttonTestId
   }, (0, _react2.jsx)(ButtonIcon, {
     label: buttonLabel,
-    size: size
+    size: size,
+    primaryColor: _theme.flagTextColorToken[appearance]
   })));
 };
 

package/dist/cjs/internal/expander.js

@@ -1,32 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("@emotion/react");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _motion = require("@atlaskit/motion");
+var _react = _interopRequireDefault(require("react"));
 
-var _constants = require("@atlaskit/theme/constants");
-
-/** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
-var paddingLeft = gridSize * 5;
-var expanderStyles = (0, _react.css)({
-  display: 'flex',
-  minWidth: 0,
-  maxHeight: 0,
-  padding: "0 0 0 ".concat(paddingLeft, "px"),
-  justifyContent: 'center',
-  flex: '1 1 100%',
-  flexDirection: 'column',
-  transition: "max-height 0.3s"
-});
-var expandedStyles = (0, _react.css)({
-  maxHeight: 150
-});
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+var _motion = require("@atlaskit/motion");
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -35,14 +22,26 @@ var Expander = function Expander(_ref) {
   // Need to always render the ExpanderInternal otherwise the
   // reveal transition doesn't happen. We can't use CSS animation for
   // the the reveal because we don't know the height of the content.
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
+    UNSAFE_style: {
+      minWidth: 0,
+      maxHeight: isExpanded ? 150 : 0,
+      flex: '1 1 100%',
+      transition: "max-height 0.3s"
+    },
     "aria-hidden": !isExpanded,
-    css: [expanderStyles, isExpanded && expandedStyles],
-    "data-testid": testId && "".concat(testId, "-expander")
-  }, (0, _react.jsx)(_motion.ExitingPersistence, {
+    testId: testId && "".concat(testId, "-expander")
+  }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
     appear: true
-  }, isExpanded && (0, _react.jsx)(_motion.FadeIn, null, function (props) {
-    return (0, _react.jsx)("div", props, children);
+  }, isExpanded && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, null, function (props) {
+    return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+      display: "block",
+      UNSAFE_style: {
+        width: '100%'
+      }
+    }, props), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Stack, {
+      gap: "scale.100"
+    }, children));
   })));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/internal/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Description", {
-  enumerable: true,
-  get: function get() {
-    return _description.default;
-  }
-});
 Object.defineProperty(exports, "DismissButton", {
   enumerable: true,
   get: function get() {
@@ -23,16 +17,6 @@ Object.defineProperty(exports, "Expander", {
     return _expander.default;
   }
 });
-Object.defineProperty(exports, "Title", {
-  enumerable: true,
-  get: function get() {
-    return _title.default;
-  }
-});
-
-var _title = _interopRequireDefault(require("./title"));
-
-var _description = _interopRequireDefault(require("./description"));
 
 var _expander = _interopRequireDefault(require("./expander"));