@capillarytech/blaze-ui 6.1.6-beta.1 → 6.1.7

package/CapEmojiPicker/_capEmojiPicker.css

@@ -0,0 +1,231 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+/**
+ * CapEmojiPicker SCSS Configuration
+ * 
+ * Note: This variable should match the CLS_PREFIX constant in components/CapEmojiPicker/constants.js
+ * If you change this value, also update constants.js
+ */
+.cap-emoji-picker-wrapper {
+  position: relative;
+  width: 100%;
+}
+.cap-emoji-picker-wrapper .cap-emoji-picker-trigger-container {
+  position: absolute;
+  right: 0.285rem;
+  bottom: var(--emoji-trigger-bottom, 0.285rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.cap-emoji-picker-wrapper .cap-emoji-picker-trigger-container.cap-emoji-picker-trigger-textarea {
+  right: 0.285rem;
+  bottom: var(--emoji-trigger-bottom, 0.285rem);
+}
+.cap-emoji-picker-wrapper .cap-emoji-picker-trigger-container.cap-emoji-picker-trigger-input {
+  right: 0.285rem;
+  bottom: var(--emoji-trigger-bottom, 0.142rem);
+}
+.cap-emoji-picker-wrapper .cap-emoji-picker-trigger-container.cap-emoji-picker-trigger-search-with-value {
+  right: 1.571rem;
+  bottom: var(--emoji-trigger-bottom, 0.142rem);
+}
+.cap-emoji-picker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  z-index: 10;
+}
+.cap-emoji-picker-trigger:hover:not(:disabled) {
+  background-color: rgba(94, 108, 132, 0.1);
+  transform: scale(1.05);
+}
+.cap-emoji-picker-trigger:active:not(:disabled) {
+  background-color: rgba(94, 108, 132, 0.15);
+  transform: scale(0.95);
+}
+.cap-emoji-picker-trigger:focus-visible {
+  outline: none;
+  background-color: rgba(94, 108, 132, 0.1);
+}
+.cap-emoji-picker-trigger:focus:not(:focus-visible) {
+  outline: none;
+}
+.cap-emoji-picker-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.cap-emoji-picker-trigger img {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  pointer-events: none;
+}
+.ant-popover.cap-popover-v2.cap-emoji-picker-popover {
+  max-width: none;
+}
+.cap-emoji-picker-popover .ant-popover-inner {
+  padding: 0;
+  background: #ffffff;
+  border-radius: 0.285rem;
+}
+.cap-emoji-picker-popover .ant-popover-content .ant-popover-inner-content {
+  padding: 0;
+}
+.cap-emoji-picker-popover .ant-popover-arrow {
+  display: none;
+}
+.cap-emoji-picker-popover .ant-popover-inner-content {
+  background: #ffffff;
+  color: #091e42;
+}
+.cap-emoji-picker-panel {
+  width: fit-content;
+  background: #ffffff;
+  color: #091e42;
+  color-scheme: light;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.285rem;
+  overflow: hidden;
+  --epr-bg-color: #ffffff;
+  --epr-text-color: #091e42;
+  --epr-category-label-bg-color: #ffffff;
+  --epr-category-label-text-color: #5e6c84;
+  --epr-hover-bg-color: #f4f5f7;
+  --epr-search-input-bg-color: #ffffff;
+  --epr-search-input-text-color: #091e42;
+  --epr-search-input-border-color: #e8e8e8;
+  --epr-search-input-placeholder-color: #97a0af;
+  --epr-picker-border-color: #e8e8e8;
+  --epr-preview-bg-color: #ffffff;
+  --epr-preview-text-color: #5e6c84;
+  --epr-preview-border-color: #e8e8e8;
+}
+.cap-emoji-picker-panel .epr-main {
+  background: #ffffff;
+  border: none;
+  border-radius: 0.285rem;
+}
+.cap-emoji-picker-panel .epr-search-container {
+  background: #ffffff;
+}
+.cap-emoji-picker-panel .epr-search {
+  background: #ffffff;
+  color: #091e42;
+  border: none;
+  padding: 0.714rem 0.857rem;
+  font-size: 1rem;
+}
+.cap-emoji-picker-panel .epr-search::placeholder {
+  color: #97a0af;
+}
+.cap-emoji-picker-panel .epr-search:focus {
+  outline: none;
+  background: #ffffff;
+}
+.cap-emoji-picker-panel .epr-emoji-category-label {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(0.214rem);
+  color: #5e6c84;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.571rem 1.142rem;
+}
+.cap-emoji-picker-panel .epr-emoji {
+  border-radius: 0.428rem;
+}
+.cap-emoji-picker-panel .epr-emoji:hover {
+  background: #f4f5f7;
+}
+.cap-emoji-picker-panel .epr-emoji:focus {
+  outline: none;
+}
+.cap-emoji-picker-panel .epr-emoji-category-content {
+  background: #ffffff;
+}
+.cap-emoji-picker-panel .epr-body {
+  background: #ffffff;
+}
+.cap-emoji-picker-panel .epr-skin-tones-list {
+  background: transparent;
+}
+.cap-emoji-picker-panel .epr-skin-tone {
+  border-radius: 0.285rem;
+  padding: 0.285rem;
+}
+.cap-emoji-picker-panel .epr-skin-tone:hover {
+  background: #f4f5f7;
+}
+.cap-emoji-picker-panel .epr-preview {
+  background: #ffffff;
+  border-top: 1px solid #e8e8e8;
+  padding: 0.571rem 0.857rem;
+  font-size: 0.857rem;
+  color: #5e6c84;
+  min-height: 2.857rem;
+  display: flex;
+  align-items: center;
+}
+.cap-emoji-picker-panel .epr-preview-emoji-label {
+  color: #5e6c84;
+  font-size: 0.857rem;
+}
+.cap-emoji-picker-panel .epr-emoji-img {
+  margin-right: 0.571rem;
+}
+.cap-emoji-picker-panel .cap-emoji-picker-error-container {
+  width: 350px;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #97a0af;
+  padding: 1.428rem;
+  text-align: center;
+}
+.cap-emoji-picker-panel .cap-emoji-picker-error-message {
+  margin-bottom: 1.142rem;
+  font-size: 1.143rem;
+  color: #ea213a;
+}
+.cap-emoji-picker-panel .cap-emoji-picker-retry-button {
+  padding: 0.571rem 1.142rem;
+  background-color: #2466ea;
+  color: #ffffff;
+  border: none;
+  border-radius: 0.285rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s ease;
+}
+.cap-emoji-picker-panel .cap-emoji-picker-retry-button:hover {
+  background-color: rgba(36, 102, 234, 0.85);
+}
+.cap-emoji-picker-panel .cap-emoji-picker-retry-button:active {
+  background-color: rgba(36, 102, 234, 0.75);
+}
+.cap-emoji-picker-panel .cap-emoji-picker-loading-container {
+  width: 350px;
+  height: 450px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #97a0af;
+}

package/CapEmojiPicker/_capEmojiPicker.scss

@@ -0,0 +1,281 @@
+@import '../styles/_variables.scss';
+@import './_config.scss';
+
+.#{$clsPrefix}-wrapper {
+  position: relative;
+  width: 100%;
+
+  .#{$clsPrefix}-trigger-container {
+    position: absolute;
+    right: $CAP_SPACE_04;
+    bottom: var(--emoji-trigger-bottom, $CAP_SPACE_04);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+
+    // TextArea positioning (default: right: 4px, bottom: 4px)
+    &.#{$clsPrefix}-trigger-textarea {
+      right: $CAP_SPACE_04;
+      bottom: var(--emoji-trigger-bottom, $CAP_SPACE_04);
+    }
+
+    // Regular Input positioning (right: 4px, bottom: 2px)
+    &.#{$clsPrefix}-trigger-input {
+      right: $CAP_SPACE_04;
+      bottom: var(--emoji-trigger-bottom, $CAP_SPACE_02);
+    }
+
+    // Search Input with value (right: 22px, bottom: 2px to avoid clear icon)
+    // Note: 1.571rem (22px) doesn't have a direct variable match, keeping as is for precise positioning
+    &.#{$clsPrefix}-trigger-search-with-value {
+      right: 1.571rem;
+      bottom: var(--emoji-trigger-bottom, $CAP_SPACE_02);
+    }
+  }
+}
+
+.#{$clsPrefix}-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $CAP_SPACE_28;
+  height: $CAP_SPACE_28;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+  z-index: 10;
+
+  &:hover:not(:disabled) {
+    background-color: rgba($CAP_G04, 0.1); // Light background on hover (rounded)
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    background-color: rgba($CAP_G04, 0.15);
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: rgba($CAP_G04, 0.1);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  img {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    pointer-events: none;
+  }
+}
+
+// Override max-width constraint from .ant-popover.cap-popover-v2 specifically for emoji picker
+.ant-popover.cap-popover-v2.#{$clsPrefix}-popover {
+  max-width: none;
+}
+
+.#{$clsPrefix}-popover {
+  // Increase specificity for Ant Design overrides by nesting under component class
+
+  & .ant-popover-inner {
+    padding: 0;
+    background: $CAP_WHITE;
+    border-radius: $CAP_SPACE_04;
+  }
+
+  & .ant-popover-content {
+    & .ant-popover-inner-content {
+      padding: 0;
+    }
+  }
+
+  & .ant-popover-arrow {
+    display: none;
+  }
+
+  & .ant-popover-inner-content {
+    background: $CAP_WHITE;
+    color: $FONT_COLOR_01;
+  }
+}
+
+.#{$clsPrefix}-panel {
+  width: fit-content;
+  background: $CAP_WHITE;
+  color: $FONT_COLOR_01;
+  color-scheme: light;
+  display: flex;
+  flex-direction: column;
+  border-radius: $CAP_SPACE_04;
+  overflow: hidden;
+
+  // emoji-picker-react dependency: ^4.5.0
+  // Style emoji-picker-react component to match design system
+  // Using CSS variables and class selectors for customization
+  & .epr-main {
+    background: $CAP_WHITE;
+    border: none;
+    border-radius: $CAP_SPACE_04;
+  }
+
+  & .epr-search-container {
+    background: $CAP_WHITE;
+  }
+
+  & .epr-search {
+    background: $CAP_WHITE;
+    color: $FONT_COLOR_01;
+    border: none;
+    padding: 0.714rem $CAP_SPACE_12;
+    font-size: $FONT_SIZE_M;
+
+    &::placeholder {
+      color: $CAP_G05;
+    }
+
+    &:focus {
+      outline: none;
+      background: $CAP_WHITE;
+    }
+  }
+
+  & .epr-emoji-category-label {
+    background: rgba($CAP_WHITE, 0.8);
+    backdrop-filter: blur($CAP_SPACE_03);
+    color: $FONT_COLOR_02;
+    font-size: $FONT_SIZE_M;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+    padding: $CAP_SPACE_08 $CAP_SPACE_16;
+  }
+
+  & .epr-emoji {
+    border-radius: $CAP_SPACE_06;
+
+    &:hover {
+      background: $CAP_G09;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  & .epr-emoji-category-content {
+    background: $CAP_WHITE;
+  }
+
+  & .epr-body {
+    background: $CAP_WHITE;
+  }
+
+  & .epr-skin-tones-list {
+    background: transparent;
+  }
+
+  & .epr-skin-tone {
+    border-radius: $CAP_SPACE_04;
+    padding: $CAP_SPACE_04;
+
+    &:hover {
+      background: $CAP_G09;
+    }
+  }
+
+  // Style the built-in preview section
+  & .epr-preview {
+    background: $CAP_WHITE;
+    border-top: 1px solid $CAP_G12;
+    padding: $CAP_SPACE_08 $CAP_SPACE_12;
+    font-size: $FONT_SIZE_S;
+    color: $FONT_COLOR_02;
+    min-height: $CAP_SPACE_40;
+    display: flex;
+    align-items: center;
+  }
+
+  & .epr-preview-emoji-label {
+    color: $FONT_COLOR_02;
+    font-size: $FONT_SIZE_S;
+  }
+
+  & .epr-emoji-img {
+    margin-right: $CAP_SPACE_08;
+  }
+
+  // Override emoji-picker-react CSS variables for theming
+  --epr-bg-color: #{$CAP_WHITE};
+  --epr-text-color: #{$FONT_COLOR_01};
+  --epr-category-label-bg-color: #{$CAP_WHITE};
+  --epr-category-label-text-color: #{$FONT_COLOR_02};
+  --epr-hover-bg-color: #{$CAP_G09};
+  --epr-search-input-bg-color: #{$CAP_WHITE};
+  --epr-search-input-text-color: #{$FONT_COLOR_01};
+  --epr-search-input-border-color: #{$CAP_G12};
+  --epr-search-input-placeholder-color: #{$CAP_G05};
+  --epr-picker-border-color: #{$CAP_G12};
+  --epr-preview-bg-color: #{$CAP_WHITE};
+  --epr-preview-text-color: #{$FONT_COLOR_02};
+  --epr-preview-border-color: #{$CAP_G12};
+
+  // Error state styles
+  & .#{$clsPrefix}-error-container {
+    width: 350px;
+    height: 450px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: $CAP_G05;
+    padding: $CAP_SPACE_20;
+    text-align: center;
+  }
+
+  & .#{$clsPrefix}-error-message {
+    margin-bottom: $CAP_SPACE_16;
+    font-size: $FONT_SIZE_L;
+    color: $CAP_RED;
+  }
+
+  & .#{$clsPrefix}-retry-button {
+    padding: $CAP_SPACE_08 $CAP_SPACE_16;
+    background-color: $FONT_COLOR_05;
+    color: $CAP_WHITE;
+    border: none;
+    border-radius: $CAP_SPACE_04;
+    cursor: pointer;
+    font-size: $FONT_SIZE_M;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba($FONT_COLOR_05, 0.85);
+    }
+
+    &:active {
+      background-color: rgba($FONT_COLOR_05, 0.75);
+    }
+  }
+
+  // Loading state styles
+  & .#{$clsPrefix}-loading-container {
+    width: 350px;
+    height: 450px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $CAP_G05;
+  }
+}

package/CapEmojiPicker/_config.scss

@@ -0,0 +1,7 @@
+/**
+ * CapEmojiPicker SCSS Configuration
+ * 
+ * Note: This variable should match the CLS_PREFIX constant in components/CapEmojiPicker/constants.js
+ * If you change this value, also update constants.js
+ */
+$clsPrefix: 'cap-emoji-picker';

package/CapEmojiPicker/assets/sentiment-satsified.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66667 10.3333C7.25556 10.3333 7.81389 10.2056 8.34167 9.95C8.86944 9.69444 9.29444 9.32222 9.61667 8.83333C9.73889 8.64444 9.75556 8.45833 9.66667 8.275C9.57778 8.09167 9.43333 8 9.23333 8C9.14444 8 9.06389 8.01944 8.99167 8.05833C8.91944 8.09722 8.86111 8.15555 8.81667 8.23333C8.56111 8.57778 8.24444 8.84722 7.86667 9.04167C7.48889 9.23611 7.08889 9.33333 6.66667 9.33333C6.24444 9.33333 5.84444 9.23611 5.46667 9.04167C5.08889 8.84722 4.77222 8.57778 4.51667 8.23333C4.46111 8.15555 4.39722 8.09722 4.325 8.05833C4.25278 8.01944 4.17222 8 4.08333 8C3.88333 8 3.73889 8.08889 3.65 8.26667C3.56111 8.44444 3.57778 8.62222 3.7 8.8C4.02222 9.3 4.44722 9.68056 4.975 9.94167C5.50278 10.2028 6.06667 10.3333 6.66667 10.3333ZM9 6C9.27778 6 9.51389 5.90278 9.70833 5.70833C9.90278 5.51389 10 5.27778 10 5C10 4.72222 9.90278 4.48611 9.70833 4.29167C9.51389 4.09722 9.27778 4 9 4C8.72222 4 8.48611 4.09722 8.29167 4.29167C8.09722 4.48611 8 4.72222 8 5C8 5.27778 8.09722 5.51389 8.29167 5.70833C8.48611 5.90278 8.72222 6 9 6ZM4.33333 6C4.61111 6 4.84722 5.90278 5.04167 5.70833C5.23611 5.51389 5.33333 5.27778 5.33333 5C5.33333 4.72222 5.23611 4.48611 5.04167 4.29167C4.84722 4.09722 4.61111 4 4.33333 4C4.05556 4 3.81944 4.09722 3.625 4.29167C3.43056 4.48611 3.33333 4.72222 3.33333 5C3.33333 5.27778 3.43056 5.51389 3.625 5.70833C3.81944 5.90278 4.05556 6 4.33333 6ZM6.66667 13.3333C5.74444 13.3333 4.87778 13.1583 4.06667 12.8083C3.25556 12.4583 2.55 11.9833 1.95 11.3833C1.35 10.7833 0.875 10.0778 0.525 9.26667C0.175 8.45555 0 7.58889 0 6.66667C0 5.74444 0.175 4.87778 0.525 4.06667C0.875 3.25556 1.35 2.55 1.95 1.95C2.55 1.35 3.25556 0.875 4.06667 0.525C4.87778 0.175 5.74444 0 6.66667 0C7.58889 0 8.45555 0.175 9.26667 0.525C10.0778 0.875 10.7833 1.35 11.3833 1.95C11.9833 2.55 12.4583 3.25556 12.8083 4.06667C13.1583 4.87778 13.3333 5.74444 13.3333 6.66667C13.3333 7.58889 13.1583 8.45555 12.8083 9.26667C12.4583 10.0778 11.9833 10.7833 11.3833 11.3833C10.7833 11.9833 10.0778 12.4583 9.26667 12.8083C8.45555 13.1583 7.58889 13.3333 6.66667 13.3333ZM6.66667 12C8.15555 12 9.41667 11.4833 10.45 10.45C11.4833 9.41667 12 8.15555 12 6.66667C12 5.17778 11.4833 3.91667 10.45 2.88333C9.41667 1.85 8.15555 1.33333 6.66667 1.33333C5.17778 1.33333 3.91667 1.85 2.88333 2.88333C1.85 3.91667 1.33333 5.17778 1.33333 6.66667C1.33333 8.15555 1.85 9.41667 2.88333 10.45C3.91667 11.4833 5.17778 12 6.66667 12Z" fill="#5E6C84"/>
+</svg>

package/CapEmojiPicker/assets/sentiment-satsified.svg.js

@@ -0,0 +1,4 @@
+const emojiIcon = "data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.66667%2010.3333C7.25556%2010.3333%207.81389%2010.2056%208.34167%209.95C8.86944%209.69444%209.29444%209.32222%209.61667%208.83333C9.73889%208.64444%209.75556%208.45833%209.66667%208.275C9.57778%208.09167%209.43333%208%209.23333%208C9.14444%208%209.06389%208.01944%208.99167%208.05833C8.91944%208.09722%208.86111%208.15555%208.81667%208.23333C8.56111%208.57778%208.24444%208.84722%207.86667%209.04167C7.48889%209.23611%207.08889%209.33333%206.66667%209.33333C6.24444%209.33333%205.84444%209.23611%205.46667%209.04167C5.08889%208.84722%204.77222%208.57778%204.51667%208.23333C4.46111%208.15555%204.39722%208.09722%204.325%208.05833C4.25278%208.01944%204.17222%208%204.08333%208C3.88333%208%203.73889%208.08889%203.65%208.26667C3.56111%208.44444%203.57778%208.62222%203.7%208.8C4.02222%209.3%204.44722%209.68056%204.975%209.94167C5.50278%2010.2028%206.06667%2010.3333%206.66667%2010.3333ZM9%206C9.27778%206%209.51389%205.90278%209.70833%205.70833C9.90278%205.51389%2010%205.27778%2010%205C10%204.72222%209.90278%204.48611%209.70833%204.29167C9.51389%204.09722%209.27778%204%209%204C8.72222%204%208.48611%204.09722%208.29167%204.29167C8.09722%204.48611%208%204.72222%208%205C8%205.27778%208.09722%205.51389%208.29167%205.70833C8.48611%205.90278%208.72222%206%209%206ZM4.33333%206C4.61111%206%204.84722%205.90278%205.04167%205.70833C5.23611%205.51389%205.33333%205.27778%205.33333%205C5.33333%204.72222%205.23611%204.48611%205.04167%204.29167C4.84722%204.09722%204.61111%204%204.33333%204C4.05556%204%203.81944%204.09722%203.625%204.29167C3.43056%204.48611%203.33333%204.72222%203.33333%205C3.33333%205.27778%203.43056%205.51389%203.625%205.70833C3.81944%205.90278%204.05556%206%204.33333%206ZM6.66667%2013.3333C5.74444%2013.3333%204.87778%2013.1583%204.06667%2012.8083C3.25556%2012.4583%202.55%2011.9833%201.95%2011.3833C1.35%2010.7833%200.875%2010.0778%200.525%209.26667C0.175%208.45555%200%207.58889%200%206.66667C0%205.74444%200.175%204.87778%200.525%204.06667C0.875%203.25556%201.35%202.55%201.95%201.95C2.55%201.35%203.25556%200.875%204.06667%200.525C4.87778%200.175%205.74444%200%206.66667%200C7.58889%200%208.45555%200.175%209.26667%200.525C10.0778%200.875%2010.7833%201.35%2011.3833%201.95C11.9833%202.55%2012.4583%203.25556%2012.8083%204.06667C13.1583%204.87778%2013.3333%205.74444%2013.3333%206.66667C13.3333%207.58889%2013.1583%208.45555%2012.8083%209.26667C12.4583%2010.0778%2011.9833%2010.7833%2011.3833%2011.3833C10.7833%2011.9833%2010.0778%2012.4583%209.26667%2012.8083C8.45555%2013.1583%207.58889%2013.3333%206.66667%2013.3333ZM6.66667%2012C8.15555%2012%209.41667%2011.4833%2010.45%2010.45C11.4833%209.41667%2012%208.15555%2012%206.66667C12%205.17778%2011.4833%203.91667%2010.45%202.88333C9.41667%201.85%208.15555%201.33333%206.66667%201.33333C5.17778%201.33333%203.91667%201.85%202.88333%202.88333C1.85%203.91667%201.33333%205.17778%201.33333%206.66667C1.33333%208.15555%201.85%209.41667%202.88333%2010.45C3.91667%2011.4833%205.17778%2012%206.66667%2012Z'%20fill='%235E6C84'/%3e%3c/svg%3e";
+export {
+  emojiIcon as default
+};

package/CapEmojiPicker/constants.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Class prefix constant for CapEmojiPicker component
+ * Used across all CapEmojiPicker sub-components for consistent class naming
+ *
+ * Note: This constant should match the $clsPrefix variable in _config.scss
+ * If you change this value, also update _config.scss
+ */
+export declare const CLS_PREFIX = "cap-emoji-picker";
+/**
+ * Constants for HTML tag names
+ * Used to identify input and textarea elements
+ */
+export declare const INPUT_TAG = "INPUT";
+export declare const TEXTAREA_TAG = "TEXTAREA";
+/**
+ * CSS selector for input and textarea elements
+ * Used to query DOM for input/textarea elements
+ */
+export declare const INPUT_TEXTAREA_SELECTOR = "input, textarea";
+/**
+ * Emoji picker dimensions
+ * Used for both the picker component and loading fallback
+ */
+export declare const PICKER_WIDTH = 350;
+export declare const PICKER_HEIGHT = 450;
+/**
+ * Default popover placement for emoji picker
+ */
+export declare const DEFAULT_POPOVER_PLACEMENT = "rightTop";
+/**
+ * Loading fallback text color
+ */
+export declare const LOADING_FALLBACK_COLOR = "#999";
+//# sourceMappingURL=constants.d.ts.map

package/CapEmojiPicker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/CapEmojiPicker/constants.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,qBAAqB,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,SAAS,UAAU,CAAC;AACjC,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,uBAAuB,oBAAoB,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,sBAAsB,SAAS,CAAC"}

package/CapEmojiPicker/constants.js

@@ -0,0 +1,18 @@
+const CLS_PREFIX = "cap-emoji-picker";
+const INPUT_TAG = "INPUT";
+const TEXTAREA_TAG = "TEXTAREA";
+const INPUT_TEXTAREA_SELECTOR = "input, textarea";
+const PICKER_WIDTH = 350;
+const PICKER_HEIGHT = 450;
+const DEFAULT_POPOVER_PLACEMENT = "rightTop";
+const LOADING_FALLBACK_COLOR = "#999";
+export {
+  CLS_PREFIX,
+  DEFAULT_POPOVER_PLACEMENT,
+  INPUT_TAG,
+  INPUT_TEXTAREA_SELECTOR,
+  LOADING_FALLBACK_COLOR,
+  PICKER_HEIGHT,
+  PICKER_WIDTH,
+  TEXTAREA_TAG
+};

package/CapEmojiPicker/index.d.ts

@@ -0,0 +1,4 @@
+import './_capEmojiPicker.scss';
+declare const CapEmojiPicker: import("react").ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+export default CapEmojiPicker;
+//# sourceMappingURL=index.d.ts.map

package/CapEmojiPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapEmojiPicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAKhC,QAAA,MAAM,cAAc,yFAAU,CAAC;AAM/B,eAAe,cAAc,CAAC"}

package/CapEmojiPicker/index.js

@@ -0,0 +1,11 @@
+import './_capEmojiPicker.css';/* empty css                     */
+import Picker from "./Picker/index.js";
+import TriggerButton from "./TriggerButton/index.js";
+import Wrapper from "./Wrapper/index.js";
+const CapEmojiPicker = Wrapper;
+CapEmojiPicker.TriggerButton = TriggerButton;
+CapEmojiPicker.Picker = Picker;
+CapEmojiPicker.Wrapper = Wrapper;
+export {
+  CapEmojiPicker as default
+};

package/CapEmojiPicker/utils.d.ts

@@ -0,0 +1,20 @@
+/** Ref or element that may wrap an input/textarea (e.g. Ant Design Input/TextArea) */
+interface InputRefLike {
+    current?: HTMLInputElement | HTMLTextAreaElement | InputRefLike | null;
+    input?: HTMLInputElement;
+    resizableTextArea?: {
+        textArea: HTMLTextAreaElement;
+    };
+    textAreaRef?: HTMLTextAreaElement;
+}
+type InputRefCandidate = InputRefLike | HTMLInputElement | HTMLTextAreaElement | null;
+/**
+ * Resolve the actual input/textarea element from various ref formats
+ * Supports both Ant Design Input and Input.TextArea structures
+ *
+ * @param candidate - The ref or element to resolve
+ * @returns The resolved input/textarea element, or null if not found
+ */
+declare const resolveInputElement: (candidate: InputRefCandidate) => HTMLInputElement | HTMLTextAreaElement | null;
+export { resolveInputElement };
+//# sourceMappingURL=utils.d.ts.map

package/CapEmojiPicker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../components/CapEmojiPicker/utils.ts"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,iBAAiB,CAAC,EAAE;QAAE,QAAQ,EAAE,mBAAmB,CAAA;KAAE,CAAC;IACtD,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,iBAAiB,GAAG,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAEtF;;;;;;GAMG;AACH,QAAA,MAAM,mBAAmB,GACvB,WAAW,iBAAiB,KAC3B,gBAAgB,GAAG,mBAAmB,GAAG,IA0B3C,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/CapEmojiPicker/utils.js

@@ -0,0 +1,24 @@
+import { INPUT_TAG, TEXTAREA_TAG } from "./constants.js";
+const resolveInputElement = (candidate) => {
+  var _a;
+  if (!candidate) {
+    return null;
+  }
+  const refTarget = candidate.current || candidate;
+  if ([INPUT_TAG, TEXTAREA_TAG].includes(refTarget == null ? void 0 : refTarget.tagName)) {
+    return refTarget;
+  }
+  if ((_a = refTarget == null ? void 0 : refTarget.resizableTextArea) == null ? void 0 : _a.textArea) {
+    return refTarget.resizableTextArea.textArea;
+  }
+  if (refTarget == null ? void 0 : refTarget.textAreaRef) {
+    return refTarget.textAreaRef;
+  }
+  if (refTarget == null ? void 0 : refTarget.input) {
+    return refTarget.input;
+  }
+  return refTarget;
+};
+export {
+  resolveInputElement
+};