@pingux/astro 2.86.0 → 2.87.0-alpha.1

package/lib/cjs/components/Card/Card.js

@@ -1,15 +1,22 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _focus = require("@react-aria/focus");
@@ -18,9 +25,11 @@ var _utils = require("@react-aria/utils");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isInteractiveWithin"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     onHoverStart = props.onHoverStart,
@@ -31,6 +40,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPressEnd = props.onPressEnd,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
+    isInteractiveWithin = props.isInteractiveWithin,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var cardRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useHover = (0, _interactions.useHover)({
@@ -65,7 +75,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
-  var mergedProps = (0, _utils.mergeProps)(others, hoverProps, pressProps, focusProps, focusWithinProps);
+
+  // TODO: [Astro 3.0.0] Update isInteractiveWithin[default] for this prop to true
+  var mergedProps = (0, _utils.mergeProps)(others, focusWithinProps, !isInteractiveWithin ? _objectSpread(_objectSpread(_objectSpread({}, pressProps), hoverProps), focusProps) : {});
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     "aria-label": ariaLabel,
     variant: "cards.container",

package/lib/cjs/components/Card/Card.stories.d.ts

@@ -32,3 +32,4 @@ export declare const InteractiveCard: {
         };
     };
 };
+export declare const WithInteractiveContent: () => React.JSX.Element;

package/lib/cjs/components/Card/Card.stories.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
+exports["default"] = exports.WithInteractiveContent = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -170,4 +170,14 @@ InteractiveCard.parameters = {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.card.interactiveCard
   }
-};
+};
+var WithInteractiveContent = function WithInteractiveContent() {
+  return (0, _react2.jsx)(_index.Card, {
+    isInteractiveWithin: true
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), (0, _react2.jsx)(_index.TextField, {
+    label: "Interactive TextField",
+    mt: "md",
+    width: "300px"
+  }));
+};
+exports.WithInteractiveContent = WithInteractiveContent;

package/lib/cjs/components/Card/Card.test.js

@@ -1,14 +1,28 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
+var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
+var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
+var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
+var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
+var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _Box = _interopRequireDefault(require("../Box"));
 var _Button = _interopRequireDefault(require("../Button"));
+var _TextField = _interopRequireDefault(require("../TextField"));
 var _Card = _interopRequireDefault(require("./Card"));
 var _react3 = require("@emotion/react");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context2; _forEachInstanceProperty(_context2 = ["next", "throw", "return"]).call(_context2, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context3; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context3 = this.tryEntries).call(_context3, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 var testId = 'test-separator';
 var defaultProps = {
   'data-testid': testId,
@@ -69,4 +83,35 @@ test('allows focus within card', function () {
   expect(card).toHaveClass('is-focused');
   _userEvent["default"].tab();
   expect(button).toHaveClass('is-focused');
-});
+});
+test('renders Card component with text selection', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var children, card, range, selection, textField;
+  return _regeneratorRuntime().wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        children = (0, _react3.jsx)(_Box["default"], null, "Select this text.", (0, _react3.jsx)(_TextField["default"], {
+          label: "Interactive TextField"
+        }));
+        getComponent({
+          isInteractiveWithin: true,
+          children: children
+        });
+        card = _react2.screen.getByTestId(testId); // Programmatically create a range and select it
+        range = document.createRange();
+        range.selectNodeContents(card);
+        selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // Verify that the selection was successful
+        expect(selection.toString()).toBe('Select this text.Interactive TextField');
+        textField = _react2.screen.getByLabelText('Interactive TextField');
+        _userEvent["default"].click(textField);
+        _userEvent["default"].type(textField, selection.toString());
+        expect(textField).toHaveValue('Select this text.Interactive TextField');
+      case 13:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/lib/cjs/components/Icon/Icon.stories.js

@@ -127,6 +127,17 @@ var Sizes = function Sizes() {
   }, (0, _react2.jsx)(_index.TableRow, {
     height: "45px",
     bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+    icon: _SearchIcon["default"],
+    size: "xxs",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "45px",
+    bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {

package/lib/cjs/components/Icon/Icon.test.js

@@ -54,6 +54,13 @@ test('default icon', function () {
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
 });
+test('icon renders correct xxsmall tshirt size', function () {
+  getComponent({
+    size: 'xxs'
+  });
+  var xsIcon = _react2.screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '9px');
+});
 test('icon renders correct xsmall tshirt size', function () {
   getComponent({
     size: 'xs'

package/lib/cjs/components/IconButton/IconButton.stories.js

@@ -98,6 +98,28 @@ var Sizes = function Sizes() {
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     width: "40%"
+  }, (0, _react2.jsx)(_index.Text, null, "XXS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='xxs'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create button",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "xxs",
+    title: {
+      name: 'Create Icon'
+    }
+  })))), (0, _react2.jsx)(_index.TableRow, {
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    width: "40%"
   }, (0, _react2.jsx)(_index.Text, null, "XS | 21px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
@@ -175,6 +197,14 @@ var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "delete"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Delete Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _DeleteIcon["default"],
       size: "xs",
@@ -204,6 +234,15 @@ var CommonlyUsed = function CommonlyUsed() {
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "delete",
       variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Delete Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _DeleteIcon["default"],
       size: "xs",
@@ -237,6 +276,14 @@ var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _DotsVerticalIcon["default"],
       size: "xs",
@@ -266,6 +313,15 @@ var CommonlyUsed = function CommonlyUsed() {
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options",
       variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _DotsVerticalIcon["default"],
       size: "xs",
@@ -299,6 +355,14 @@ var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "add"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Plus Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PlusIcon["default"],
       size: "xs",
@@ -328,6 +392,15 @@ var CommonlyUsed = function CommonlyUsed() {
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "add",
       variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Plus Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PlusIcon["default"],
       size: "xs",
@@ -361,6 +434,14 @@ var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "create"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Pencil Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PencilIcon["default"],
       size: "xs",
@@ -390,6 +471,15 @@ var CommonlyUsed = function CommonlyUsed() {
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "create",
       variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "xxs",
+      title: {
+        name: 'Pencil Icon'
+      }
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PencilIcon["default"],
       size: "xs",

package/lib/cjs/hooks/useNavBarStyling/useNavBarStyling.d.ts

@@ -31,7 +31,7 @@ interface NavBarStyling {
         navBarItemText: string;
         navBarItemHeaderListItem: string | null;
         navBarItemBody: string;
-        navBarItemHeaderIconSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xx';
+        navBarItemHeaderIconSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xx';
         navBarItemLinkButtonColor: string | null;
     };
 }

package/lib/cjs/types/card.d.ts

@@ -2,4 +2,5 @@ import { BoxProps } from './box';
 import { DOMAttributes, HoverProps, PressProps } from './shared';
 export interface CardProps extends PressProps, HoverProps, BoxProps, DOMAttributes {
     tabIndex?: number | string;
+    isInteractiveWithin?: boolean;
 }

package/lib/cjs/types/shared/style.d.ts

@@ -18,7 +18,7 @@ export type SizeAxis = 'width' | 'height';
 export type PlacementAxis = Axis | 'center';
 export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
 export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
-type IconTShirtSize = 'xs' | 'sm' | 'md';
+type IconTShirtSize = 'xxs' | 'xs' | 'sm' | 'md';
 type pixelSize = 'em' | 'px' | 'rem';
 export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
 export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';

package/lib/cjs/utils/devUtils/constants/tShirtSizes.js

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.tShirtSizes = void 0;
 var tShirtSizes = {
+  xxs: 9,
   xs: 15,
   sm: 20,
   md: 25

package/lib/cjs/utils/docUtils/iconSizeProps.js

@@ -12,7 +12,7 @@ var _tShirtSizes = require("../devUtils/constants/tShirtSizes");
 var sizeArgTypes = {
   size: {
     options: (0, _keys["default"])(_tShirtSizes.tShirtSizes),
-    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n    rendering 15, 20, and 25 pixel svg containers."
+    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n    rendering 9, 15, 20, and 25 pixel svg containers."
   }
 };
 exports.sizeArgTypes = sizeArgTypes;

package/lib/components/Card/Card.js

@@ -1,6 +1,17 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isInteractiveWithin"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
@@ -18,6 +29,7 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     onPressEnd = props.onPressEnd,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
+    isInteractiveWithin = props.isInteractiveWithin,
     others = _objectWithoutProperties(props, _excluded);
   var cardRef = useLocalOrForwardRef(ref);
   var _useHover = useHover({
@@ -52,7 +64,9 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
-  var mergedProps = mergeProps(others, hoverProps, pressProps, focusProps, focusWithinProps);
+
+  // TODO: [Astro 3.0.0] Update isInteractiveWithin[default] for this prop to true
+  var mergedProps = mergeProps(others, focusWithinProps, !isInteractiveWithin ? _objectSpread(_objectSpread(_objectSpread({}, pressProps), hoverProps), focusProps) : {});
   return ___EmotionJSX(Box, _extends({
     "aria-label": ariaLabel,
     variant: "cards.container",

package/lib/components/Card/Card.stories.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Button, Card, Text } from '../../index';
+import { Box, Button, Card, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import CardReadme from './Card.mdx';
 import { cardArgTypes } from './cardAttributes';
@@ -157,4 +157,13 @@ InteractiveCard.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.card.interactiveCard
   }
+};
+export var WithInteractiveContent = function WithInteractiveContent() {
+  return ___EmotionJSX(Card, {
+    isInteractiveWithin: true
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), ___EmotionJSX(TextField, {
+    label: "Interactive TextField",
+    mt: "md",
+    width: "300px"
+  }));
 };

package/lib/components/Card/Card.test.js

@@ -1,9 +1,23 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
+import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context2; _forEachInstanceProperty(_context2 = ["next", "throw", "return"]).call(_context2, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context3; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context3 = this.tryEntries).call(_context3, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Box from '../Box';
 import Button from '../Button';
+import TextField from '../TextField';
 import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
@@ -66,4 +80,35 @@ test('allows focus within card', function () {
   expect(card).toHaveClass('is-focused');
   userEvent.tab();
   expect(button).toHaveClass('is-focused');
-});
+});
+test('renders Card component with text selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var children, card, range, selection, textField;
+  return _regeneratorRuntime().wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        children = ___EmotionJSX(Box, null, "Select this text.", ___EmotionJSX(TextField, {
+          label: "Interactive TextField"
+        }));
+        getComponent({
+          isInteractiveWithin: true,
+          children: children
+        });
+        card = screen.getByTestId(testId); // Programmatically create a range and select it
+        range = document.createRange();
+        range.selectNodeContents(card);
+        selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // Verify that the selection was successful
+        expect(selection.toString()).toBe('Select this text.Interactive TextField');
+        textField = screen.getByLabelText('Interactive TextField');
+        userEvent.click(textField);
+        userEvent.type(textField, selection.toString());
+        expect(textField).toHaveValue('Select this text.Interactive TextField');
+      case 13:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/lib/components/Icon/Icon.stories.js

@@ -117,6 +117,17 @@ export var Sizes = function Sizes() {
   }, ___EmotionJSX(TableRow, {
     height: "45px",
     bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+    icon: SearchIcon,
+    size: "xxs",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important"
   }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {

package/lib/components/Icon/Icon.test.js

@@ -45,6 +45,13 @@ test('default icon', function () {
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
 });
+test('icon renders correct xxsmall tshirt size', function () {
+  getComponent({
+    size: 'xxs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '9px');
+});
 test('icon renders correct xsmall tshirt size', function () {
   getComponent({
     size: 'xs'

package/lib/components/IconButton/IconButton.stories.js

@@ -86,6 +86,28 @@ export var Sizes = function Sizes() {
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     width: "40%"
+  }, ___EmotionJSX(Text, null, "XXS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='xxs'/>"), ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
+    "aria-label": "create button",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "xxs",
+    title: {
+      name: 'Create Icon'
+    }
+  })))), ___EmotionJSX(TableRow, {
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    width: "40%"
   }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
@@ -162,6 +184,14 @@ export var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "delete"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "xxs",
+      title: {
+        name: 'Delete Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete"
     }, ___EmotionJSX(Icon, {
       icon: DeleteIcon,
       size: "xs",
@@ -191,6 +221,15 @@ export var CommonlyUsed = function CommonlyUsed() {
     }, ___EmotionJSX(IconButton, {
       "aria-label": "delete",
       variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: "xxs",
+      title: {
+        name: 'Delete Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
     }, ___EmotionJSX(Icon, {
       icon: DeleteIcon,
       size: "xs",
@@ -224,6 +263,14 @@ export var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "more options"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "xxs",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options"
     }, ___EmotionJSX(Icon, {
       icon: DotsVerticalIcon,
       size: "xs",
@@ -253,6 +300,15 @@ export var CommonlyUsed = function CommonlyUsed() {
     }, ___EmotionJSX(IconButton, {
       "aria-label": "more options",
       variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "xxs",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
     }, ___EmotionJSX(Icon, {
       icon: DotsVerticalIcon,
       size: "xs",
@@ -286,6 +342,14 @@ export var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "add"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "xxs",
+      title: {
+        name: 'Plus Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add"
     }, ___EmotionJSX(Icon, {
       icon: PlusIcon,
       size: "xs",
@@ -315,6 +379,15 @@ export var CommonlyUsed = function CommonlyUsed() {
     }, ___EmotionJSX(IconButton, {
       "aria-label": "add",
       variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PlusIcon,
+      size: "xxs",
+      title: {
+        name: 'Plus Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
     }, ___EmotionJSX(Icon, {
       icon: PlusIcon,
       size: "xs",
@@ -348,6 +421,14 @@ export var CommonlyUsed = function CommonlyUsed() {
       mb: "md"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "create"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "xxs",
+      title: {
+        name: 'Pencil Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create"
     }, ___EmotionJSX(Icon, {
       icon: PencilIcon,
       size: "xs",
@@ -377,6 +458,15 @@ export var CommonlyUsed = function CommonlyUsed() {
     }, ___EmotionJSX(IconButton, {
       "aria-label": "create",
       variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: PencilIcon,
+      size: "xxs",
+      title: {
+        name: 'Pencil Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
     }, ___EmotionJSX(Icon, {
       icon: PencilIcon,
       size: "xs",

package/lib/utils/devUtils/constants/tShirtSizes.js

@@ -1,4 +1,5 @@
 export var tShirtSizes = {
+  xxs: 9,
   xs: 15,
   sm: 20,
   md: 25

package/lib/utils/docUtils/iconSizeProps.js

@@ -4,7 +4,7 @@ import { tShirtSizes } from '../devUtils/constants/tShirtSizes';
 export var sizeArgTypes = {
   size: {
     options: _Object$keys(tShirtSizes),
-    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n    rendering 15, 20, and 25 pixel svg containers."
+    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n    rendering 9, 15, 20, and 25 pixel svg containers."
   }
 };
 export var sizePropTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.86.0",
+  "version": "2.87.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",