@atlaskit/date-label 0.1.0

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

@@ -0,0 +1,78 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import CalendarIcon from '@atlaskit/icon/core/calendar';
+import ClockIcon from '@atlaskit/icon/core/clock';
+const containerStyles = {
+  base: "_zulp1b66 _2rko12b0 _1rjcv77o _18zr1b66 _1dqonqa1 _189ee4h9 _vchhusvi _1e0c116y _2lx2vrvc _4cvr1h6o",
+  spacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
+  neutral: "_1h6dmsup",
+  warning: "_1h6d1wfx",
+  danger: "_1h6d1mzp"
+};
+const textStyles = {
+  base: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  spacious: "_11c8fhey",
+  neutral: "_syazi7uo",
+  warning: "_syaz1xn9",
+  danger: "_syaz1tmw"
+};
+const iconStyles = {
+  base: "_1e0c1txw _1o9zidpf"
+};
+const DEFAULT_MAX_WIDTH = 180;
+const 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)
+ */
+export default function DateLabel({
+  label,
+  appearance = 'neutral',
+  hasIconBefore = true,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  isSpacious = false,
+  iconLabel,
+  testId
+}) {
+  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
+  const resolvedIconLabel = iconLabel !== undefined ? iconLabel : defaultIconLabels[appearance];
+  const 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: ax([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance]])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: ax([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(CalendarIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-subtlest, #6B6E76)"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(ClockIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-warning, #E06C00)"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-danger, #C9372C)"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([textStyles.base, isSpacious && textStyles.spacious, textStyles[appearance]])
+  }, label));
+}

package/dist/es2019/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/es2019/ui/date-label-dropdown-trigger/index.js

@@ -0,0 +1,126 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import CalendarIcon from '@atlaskit/icon/core/calendar';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ClockIcon from '@atlaskit/icon/core/clock';
+import Spinner from '@atlaskit/spinner';
+const 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"
+};
+const 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 */
+const 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 */
+
+const loadingStyles = {
+  overlay: "_1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _152tze3t _u7coze3t _1e02ze3t _rjxpze3t _lcxvglyw"
+};
+const inlineStyles = {
+  base: "_zulp1b66 _1e0c116y _2lx2vrvc _4cvr1h6o _1ul9idpf",
+  spacious: "_zulp12x7",
+  loading: "_tzy4idpf"
+};
+const DEFAULT_MAX_WIDTH = 200;
+const 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)
+ */
+export default function DateLabelDropdownTrigger({
+  label,
+  appearance = 'neutral',
+  hasIconBefore = true,
+  isSpacious = false,
+  isSelected = false,
+  isLoading = false,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  iconLabel,
+  onClick,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup,
+  'aria-label': ariaLabel,
+  testId
+}) {
+  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
+  const iconSize = isSpacious ? 'medium' : 'small';
+  const 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: ax([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance], isSelected ? containerStyles.selected : containerStyles.hoveredAndPressed, isSelected && appearance === 'warning' && containerStyles.selectedWarning])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([inlineStyles.base, isSpacious && inlineStyles.spacious, isLoading && inlineStyles.loading])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: ax([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(CalendarIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(ClockIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([textStyles.base, isSpacious && textStyles.spacious])
+  }, label)), isLoading ? /*#__PURE__*/React.createElement("span", {
+    className: ax([loadingStyles.overlay])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: isSpacious ? 'small' : 'xsmall',
+    label: ", Loading",
+    testId: testId ? `${testId}--loading-spinner` : undefined
+  })) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "",
+    size: iconSize,
+    color: "currentColor"
+  }));
+}

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

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

package/dist/esm/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/esm/ui/date-label/constants.js

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

package/dist/esm/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/esm/ui/date-label/index.js

@@ -0,0 +1,81 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import CalendarIcon from '@atlaskit/icon/core/calendar';
+import ClockIcon from '@atlaskit/icon/core/clock';
+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)
+ */
+export default 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: ax([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance]])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: ax([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(CalendarIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-subtlest, #6B6E76)"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(ClockIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-warning, #E06C00)"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "var(--ds-icon-danger, #C9372C)"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([textStyles.base, isSpacious && textStyles.spacious, textStyles[appearance]])
+  }, label));
+}

package/dist/esm/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/esm/ui/date-label-dropdown-trigger/index.js

@@ -0,0 +1,131 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import CalendarIcon from '@atlaskit/icon/core/calendar';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ClockIcon from '@atlaskit/icon/core/clock';
+import Spinner from '@atlaskit/spinner';
+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)
+ */
+export default 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: ax([containerStyles.base, isSpacious && containerStyles.spacious, containerStyles[appearance], isSelected ? containerStyles.selected : containerStyles.hoveredAndPressed, isSelected && appearance === 'warning' && containerStyles.selectedWarning])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([inlineStyles.base, isSpacious && inlineStyles.spacious, isLoading && inlineStyles.loading])
+  }, hasIconBefore && /*#__PURE__*/React.createElement("span", {
+    className: ax([iconStyles.base])
+  }, appearance === 'neutral' && /*#__PURE__*/React.createElement(CalendarIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'warning' && /*#__PURE__*/React.createElement(ClockIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  }), appearance === 'danger' && /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    label: resolvedIconLabel,
+    size: iconSize,
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([textStyles.base, isSpacious && textStyles.spacious])
+  }, label)), isLoading ? /*#__PURE__*/React.createElement("span", {
+    className: ax([loadingStyles.overlay])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: isSpacious ? 'small' : 'xsmall',
+    label: ", Loading",
+    testId: testId ? "".concat(testId, "--loading-spinner") : undefined
+  })) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "",
+    size: iconSize,
+    color: "currentColor"
+  }));
+}

package/dist/types/entry-points/date-label-dropdown-trigger.d.ts

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

package/dist/types/entry-points/date-label.d.ts

@@ -0,0 +1,4 @@
+export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
+export { default } from '../ui/date-label';
+export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
+export { default as DateLabelDropdownTrigger } from '../ui/date-label-dropdown-trigger';

package/dist/types/entry-points/types.d.ts

@@ -0,0 +1,2 @@
+export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
+export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';

package/dist/types/ui/date-label/constants.d.ts

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

package/dist/types/ui/date-label/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { DateLabelProps } from './types';
+/**
+ * __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)
+ */
+export default function DateLabel({ label, appearance, hasIconBefore, maxWidth, isSpacious, iconLabel, testId, }: DateLabelProps): JSX.Element;