@atlaskit/date-label 0.1.0

package/constellation/index/usage.mdx

@@ -0,0 +1,176 @@
+---
+title: Date label
+description:
+  Date label is a non-interactive label that displays a date and optionally, visually communicates
+  its status.
+order: 2
+---
+
+import Image from '@atlaskit/image';
+
+import dateLabelAnatomyLight from './images/date-label-anatomy-light.png';
+import dateLabelAnatomyDark from './images/date-label-anatomy-dark.png';
+import dateLabelDo1Light from './images/date-label-do-1-light.png';
+import dateLabelDo1Dark from './images/date-label-do-1-dark.png';
+import dateLabelDont1Light from './images/date-label-dont-1-light.png';
+import dateLabelDont1Dark from './images/date-label-dont-1-dark.png';
+import dateLabelDo2Light from './images/date-label-do-2-light.png';
+import dateLabelDo2Dark from './images/date-label-do-2-dark.png';
+import dateLabelDont2Light from './images/date-label-dont-2-light.png';
+import dateLabelDont2Dark from './images/date-label-dont-2-dark.png';
+import dateLabelDo3Light from './images/date-label-do-3-light.png';
+import dateLabelDo3Dark from './images/date-label-do-3-dark.png';
+import dateLabelDont3Light from './images/date-label-dont-3-light.png';
+import dateLabelDont3Dark from './images/date-label-dont-3-dark.png';
+import dateLabelDo4Light from './images/date-label-do-4-light.png';
+import dateLabelDo4Dark from './images/date-label-do-4-dark.png';
+import dateLabelDont4Light from './images/date-label-dont-4-light.png';
+import dateLabelDont4Dark from './images/date-label-dont-4-dark.png';
+
+## Usage
+
+Use a date label to visually distinguish dates from surrounding content. Date label also supports
+semantic appearances with color and icon, making it easy to scan and display its status at a glance.
+
+## Parts
+
+<Image
+	src={dateLabelAnatomyLight}
+	srcDark={dateLabelAnatomyDark}
+	alt="The anatomy of the date label component, showing two parts: a Label and an optional icon"
+/>
+
+1. **Label:** Text displaying the date.
+2. **Icon (optional):** An icon that corresponds to the appearance. Each appearance has a designated
+   icon that displays automatically when enabled.
+
+## Best practices
+
+### Only use date label to communicate dates and their status
+
+Date label should only be used to display dates. To label other things, such as the status of an
+item, consider using [Lozenge](/components/lozenge/lozenge).
+
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: dateLabelDo1Light,
+			urlDarkMode: dateLabelDo1Dark,
+			alt: 'Use date label to display dates or communicate the status of a date.',
+		}}
+	>
+		Use date label to display dates or communicate the status of a date.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: dateLabelDont1Light,
+			urlDarkMode: dateLabelDont1Dark,
+			alt: 'Don’t use date label for any other types of information',
+		}}
+	>
+		Don’t use date label for any other types of information.
+	</DoDont>
+</DoDontGrid>
+
+### Use date label dropdown trigger when interactivity is required
+
+Date labels are non-interactive. If you require an interactive date label that opens a dropdown for
+example a calendar picker, use
+[date label dropdown trigger](/components/date-label/date-label-dropdown-trigger).
+
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: dateLabelDo2Light,
+			urlDarkMode: dateLabelDo2Dark,
+			alt: 'Use a date label dropdown trigger if interactivity is required.',
+		}}
+	>
+		Use a date label dropdown trigger if interactivity is required.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: dateLabelDont2Light,
+			urlDarkMode: dateLabelDont2Dark,
+			alt: 'Don’t add custom functionality to the date label.',
+		}}
+	>
+		Don’t add custom functionality to the date label.
+	</DoDont>
+</DoDontGrid>
+
+### Don't use date labels inline with body text
+
+Date labels are designed for labelling in structured UI contexts, and not for use inline with body
+text, such as in editor.
+
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: dateLabelDo3Light,
+			urlDarkMode: dateLabelDo3Dark,
+			alt: 'Use date label to display dates for quick recognition.',
+		}}
+	>
+		Use date label to display dates for quick recognition.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: dateLabelDont3Light,
+			urlDarkMode: dateLabelDont3Dark,
+			alt: 'Don’t use date labels in line with user generated text.',
+		}}
+	>
+		Don’t use date labels in line with user generated text.
+	</DoDont>
+</DoDontGrid>
+
+## Accessibility
+
+### Use icons that carry appropriate meaning for semantic states
+
+Date labels come with designated icons for each of its semantic states. These icons are essential
+for accessibility. Without them, users must rely solely on color to distinguish states, which may
+not be perceivable to everyone.
+
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: dateLabelDo4Light,
+			urlDarkMode: dateLabelDo4Dark,
+			alt: 'Use the assigned icons for semantic appearances like an overdue date.',
+		}}
+	>
+		Use the assigned icons for semantic appearances like an overdue date.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: dateLabelDont4Light,
+			urlDarkMode: dateLabelDont4Dark,
+			alt: 'Don’t remove icons for semantic appearances or use icons that don’t carry appropriate meaning.',
+		}}
+	>
+		Don’t remove icons for semantic appearances or use icons that don’t carry appropriate meaning.
+	</DoDont>
+</DoDontGrid>
+
+## Data Center apps
+
+For all new features, we recommend using Atlassian Design System and other
+[Atlaskit components](https://atlaskit.atlassian.com/). For existing code, you can continue to use
+[Atlassian User Interface (AUI)](https://aui.atlassian.com/).
+
+## Related
+
+- For status information, use a [lozenge](/components/lozenge/lozenge).
+- For tallies or counts, use a [badge](/components/badge/badge).
+- To visually label content such as categories and attributes, use a [tag](/components/tag/tag).
+- For tagging people, team, space, or projects, use an [avatar tag](/components/tag/avatar-tag).

package/date-label/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/date-label/date-label",
+  "main": "../dist/cjs/entry-points/date-label.js",
+  "module": "../dist/esm/entry-points/date-label.js",
+  "module:es2019": "../dist/es2019/entry-points/date-label.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/date-label.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/date-label.d.ts"
+      ]
+    }
+  }
+}

package/date-label-dropdown-trigger/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/date-label/date-label-dropdown-trigger",
+  "main": "../dist/cjs/entry-points/date-label-dropdown-trigger.js",
+  "module": "../dist/esm/entry-points/date-label-dropdown-trigger.js",
+  "module:es2019": "../dist/es2019/entry-points/date-label-dropdown-trigger.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/date-label-dropdown-trigger.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/date-label-dropdown-trigger.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/entry-points/date-label-dropdown-trigger.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dateLabelDropdownTrigger.default;
+  }
+});
+var _dateLabelDropdownTrigger = _interopRequireDefault(require("../ui/date-label-dropdown-trigger"));

package/dist/cjs/entry-points/date-label.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateLabelDropdownTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _dateLabelDropdownTrigger.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dateLabel.default;
+  }
+});
+var _dateLabel = _interopRequireDefault(require("../ui/date-label"));
+var _dateLabelDropdownTrigger = _interopRequireDefault(require("../ui/date-label-dropdown-trigger"));

package/dist/cjs/entry-points/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/date-label/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DATE_LABEL_TEST_ID = void 0;
+var DATE_LABEL_TEST_ID = exports.DATE_LABEL_TEST_ID = 'date-label';

package/dist/cjs/ui/date-label/index.compiled.css

@@ -0,0 +1,30 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1dqonqa1{border-style:solid}
+._1h6d1mzp{border-color:var(--ds-border-danger-subtle,#fd9891)}
+._1h6d1wfx{border-color:var(--ds-border-warning-subtle,#fbc828)}
+._1h6dmsup{border-color:var(--ds-border-accent-gray-subtle,#b7b9be)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
+._1ul9idpf{min-width:0}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._o5721q9c{white-space:nowrap}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
+._syaz1xn9{color:var(--ds-text-warning,#9e4c00)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/date-label/index.js

@@ -0,0 +1,90 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DateLabel;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var containerStyles = {
+  base: "_zulp1b66 _2rko12b0 _1rjcv77o _18zr1b66 _1dqonqa1 _189ee4h9 _vchhusvi _1e0c116y _2lx2vrvc _4cvr1h6o",
+  spacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
+  neutral: "_1h6dmsup",
+  warning: "_1h6d1wfx",
+  danger: "_1h6d1mzp"
+};
+var textStyles = {
+  base: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  spacious: "_11c8fhey",
+  neutral: "_syazi7uo",
+  warning: "_syaz1xn9",
+  danger: "_syaz1tmw"
+};
+var iconStyles = {
+  base: "_1e0c1txw _1o9zidpf"
+};
+var DEFAULT_MAX_WIDTH = 180;
+var defaultIconLabels = {
+  neutral: 'Date',
+  warning: 'Warning',
+  danger: 'Danger'
+};
+
+/**
+ * __DateLabel__
+ *
+ * A date label is a compact label to display dates for quick recognition.
+ * It supports three appearances: `neutral`, `warning`, and `danger`.
+ *
+ * - [Examples](https://atlassian.design/components/date-label/examples)
+ * - [Code](https://atlassian.design/components/date-label/code)
+ * - [Usage](https://atlassian.design/components/date-label/usage)
+ */
+function DateLabel(_ref) {
+  var label = _ref.label,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$hasIconBefore = _ref.hasIconBefore,
+    hasIconBefore = _ref$hasIconBefore === void 0 ? true : _ref$hasIconBefore,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? DEFAULT_MAX_WIDTH : _ref$maxWidth,
+    _ref$isSpacious = _ref.isSpacious,
+    isSpacious = _ref$isSpacious === void 0 ? false : _ref$isSpacious,
+    iconLabel = _ref.iconLabel,
+    testId = _ref.testId;
+  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
+  var resolvedIconLabel = iconLabel !== undefined ? iconLabel : defaultIconLabels[appearance];
+  var iconSize = isSpacious ? 'medium' : 'small';
+  return /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: {
+      maxWidth: maxWidthValue
+    },
+    "data-testid": testId,
+    className: (0, _runtime.ax)([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance]])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(_calendar.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-subtlest, #6B6E76)"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(_clock.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-warning, #E06C00)"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(_warningOutline.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-danger, #C9372C)"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([textStyles.base, isSpacious && textStyles.spacious, textStyles[appearance]])
+  }, label));
+}

package/dist/cjs/ui/date-label/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/date-label-dropdown-trigger/index.compiled.css

@@ -0,0 +1,62 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1dqonqa1{border-style:solid}
+._1h6d1mzp{border-color:var(--ds-border-danger-subtle,#fd9891)}
+._1h6d1wfx{border-color:var(--ds-border-warning-subtle,#fbc828)}
+._1h6dmsup{border-color:var(--ds-border-accent-gray-subtle,#b7b9be)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bto1l2s{text-overflow:ellipsis}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
+._1ul9idpf{min-width:0}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._bfhkfcek{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._o5721q9c{white-space:nowrap}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
+._syaz1xn9{color:var(--ds-text-warning,#9e4c00)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
+._tzy4idpf{opacity:0}
+._u7coze3t{inset-block-end:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}
+[data-appearance=danger] ._4fvhs4qr{color:var(--ds-icon-danger,#c9372c)}
+[data-appearance=danger]:active ._1lj41tmw{color:var(--ds-text-danger,#ae2e24)}
+[data-appearance=danger]:hover ._1dyy1tmw{color:var(--ds-text-danger,#ae2e24)}
+[data-appearance=danger][data-selected] ._1x3r1tmw{color:var(--ds-text-danger,#ae2e24)}
+[data-appearance=neutral] ._n4f71cv2{color:var(--ds-icon-subtlest,#6b6e76)}
+[data-appearance=neutral]:active ._otptazsu{color:var(--ds-text-subtle,#505258)}
+[data-appearance=neutral]:hover ._j5nqazsu{color:var(--ds-text-subtle,#505258)}
+[data-appearance=neutral][data-selected] ._dlfuazsu{color:var(--ds-text-subtle,#505258)}
+[data-appearance=warning] ._bunzervl{color:var(--ds-icon-warning,#e06c00)}
+[data-appearance=warning]:active ._1cgs1xn9{color:var(--ds-text-warning,#9e4c00)}
+[data-appearance=warning]:hover ._1ky61xn9{color:var(--ds-text-warning,#9e4c00)}
+[data-appearance=warning][data-selected] ._52yy1xn9{color:var(--ds-text-warning,#9e4c00)}
+._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._9h8hmgs1:active{color:var(--ds-text-warning-bolder,#693200)}

package/dist/cjs/ui/date-label-dropdown-trigger/index.js

@@ -0,0 +1,140 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DateLabelDropdownTrigger;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var containerStyles = {
+  base: "_zulp1b66 _2rko12b0 _1rjcv77o _18zr1b66 _1dqonqa1 _189ee4h9 _kqswh2mm _vchhusvi _1e0c116y _2lx2vrvc _4cvr1h6o _80omtlke _bfhk1j28 _mizu1v1w _128mdkaa _ra3xnqa1 _1ah3v77o",
+  hoveredAndPressed: "_irr31dpa _1di6fcek",
+  spacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
+  neutral: "_1h6dmsup _syazi7uo",
+  warning: "_1h6d1wfx _syaz1xn9 _9h8hmgs1",
+  danger: "_1h6d1mzp _syaz1tmw",
+  selected: "_bfhkfcek",
+  selectedWarning: "_syazmgs1"
+};
+var textStyles = {
+  base: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  spacious: "_11c8fhey"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
+var iconStyles = {
+  base: "_1e0c1txw _1o9zidpf _n4f71cv2 _j5nqazsu _otptazsu _dlfuazsu _bunzervl _1ky61xn9 _1cgs1xn9 _52yy1xn9 _4fvhs4qr _1dyy1tmw _1lj41tmw _1x3r1tmw"
+};
+/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
+
+var loadingStyles = {
+  overlay: "_1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _152tze3t _u7coze3t _1e02ze3t _rjxpze3t _lcxvglyw"
+};
+var inlineStyles = {
+  base: "_zulp1b66 _1e0c116y _2lx2vrvc _4cvr1h6o _1ul9idpf",
+  spacious: "_zulp12x7",
+  loading: "_tzy4idpf"
+};
+var DEFAULT_MAX_WIDTH = 200;
+var defaultIconLabels = {
+  neutral: 'Date',
+  warning: 'Warning',
+  danger: 'Danger'
+};
+
+/**
+ * __DateLabelDropdownTrigger__
+ *
+ * An interactive date label that acts as a dropdown trigger.
+ * Renders as a `<button>` with hover, pressed, selected, and focus ring states,
+ * and a chevron icon on the right to signal interactivity.
+ *
+ * Supports all three appearances (`neutral`, `warning`, `danger`),
+ * the `isSpacious` variant, and `isSelected` for open/active dropdown state.
+ *
+ * - [Examples](https://atlassian.design/components/date-label/examples)
+ * - [Code](https://atlassian.design/components/date-label/code)
+ * - [Usage](https://atlassian.design/components/date-label/usage)
+ */
+function DateLabelDropdownTrigger(_ref) {
+  var label = _ref.label,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$hasIconBefore = _ref.hasIconBefore,
+    hasIconBefore = _ref$hasIconBefore === void 0 ? true : _ref$hasIconBefore,
+    _ref$isSpacious = _ref.isSpacious,
+    isSpacious = _ref$isSpacious === void 0 ? false : _ref$isSpacious,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? DEFAULT_MAX_WIDTH : _ref$maxWidth,
+    iconLabel = _ref.iconLabel,
+    onClick = _ref.onClick,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHaspopup = _ref['aria-haspopup'],
+    ariaLabel = _ref['aria-label'],
+    testId = _ref.testId;
+  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
+  var iconSize = isSpacious ? 'medium' : 'small';
+  var resolvedIconLabel = iconLabel !== undefined ? iconLabel : defaultIconLabels[appearance];
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: isLoading ? undefined : onClick,
+    "aria-disabled": isLoading || undefined,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "aria-label": ariaLabel,
+    "data-testid": testId,
+    "data-appearance": appearance,
+    "data-selected": isSelected || undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: {
+      maxWidth: maxWidthValue,
+      cursor: isLoading ? 'progress' : undefined
+    },
+    className: (0, _runtime.ax)([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance], isSelected ? containerStyles.selected : containerStyles.hoveredAndPressed, isSelected && appearance === 'warning' && containerStyles.selectedWarning])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([inlineStyles.base, isSpacious && inlineStyles.spacious, isLoading && inlineStyles.loading])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(_calendar.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(_clock.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(_warningOutline.default, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([textStyles.base, isSpacious && textStyles.spacious])
+  }, label)), isLoading ? /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([loadingStyles.overlay])
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
+    size: isSpacious ? 'small' : 'xsmall',
+    label: ", Loading",
+    testId: testId ? "".concat(testId, "--loading-spinner") : undefined
+  })) : /*#__PURE__*/React.createElement(_chevronDown.default, {
+    label: "",
+    size: iconSize,
+    color: "currentColor"
+  }));
+}

package/dist/cjs/ui/date-label-dropdown-trigger/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/es2019/entry-points/date-label-dropdown-trigger.js

@@ -0,0 +1 @@
+export { default } from '../ui/date-label-dropdown-trigger';

package/dist/es2019/entry-points/date-label.js

@@ -0,0 +1,2 @@
+export { default } from '../ui/date-label';
+export { default as DateLabelDropdownTrigger } from '../ui/date-label-dropdown-trigger';

package/dist/es2019/ui/date-label/constants.js

@@ -0,0 +1 @@
+export const DATE_LABEL_TEST_ID = 'date-label';

package/dist/es2019/ui/date-label/index.compiled.css

@@ -0,0 +1,30 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1dqonqa1{border-style:solid}
+._1h6d1mzp{border-color:var(--ds-border-danger-subtle,#fd9891)}
+._1h6d1wfx{border-color:var(--ds-border-warning-subtle,#fbc828)}
+._1h6dmsup{border-color:var(--ds-border-accent-gray-subtle,#b7b9be)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
+._1ul9idpf{min-width:0}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._o5721q9c{white-space:nowrap}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
+._syaz1xn9{color:var(--ds-text-warning,#9e4c00)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._vchhusvi{box-sizing:border-box}