@secondstaxorg/sscomp 2.0.29 → 2.0.32

package/dist/index.js

@@ -23937,90 +23937,95 @@ const SearchResultsBar = (props) => {
 };
 
 const ModalBackdrop = styled.div`
-  position: fixed;
-  overflow: hidden;
-  inset: 0;
-  background: rgb(0 0 0 / 40%);
-  z-index: 9999;
+    position: fixed;
+    overflow: hidden;
+    inset: 0;
+    background: rgb(0 0 0 / 40%);
+    z-index: 9999;
 `;
 
 const panelWidth = 510;
 const SideModalContainer = styled.div`
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: ${panelWidth}px;
-  height:100%;
-  background: ${theme.colors.white};
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  animation: 0.3s slideIn ease-out;
-  @keyframes slideIn{
-    from{
-      right: -${panelWidth}px;
-      opacity: 0.5;
-    }
-    to{
-      right: 0;
-      opacity: 1;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: ${panelWidth}px;
+    height: 100%;
+    background: ${theme.colors.white};
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    animation: 0.3s slideIn ease-out;
+    @keyframes slideIn {
+        from {
+            right: -${panelWidth}px;
+            opacity: 0.5;
+        }
+        to {
+            right: 0;
+            opacity: 1;
+        }
     }
-  }
 `;
 
 const NavSection = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: ${theme.colors.white};
-  border-bottom: 1px solid ${theme.colors["neutral-100"]};
-  padding: 32px 38px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: ${theme.colors.white};
+    border-bottom: 1px solid ${theme.colors["neutral-100"]};
+    padding: 32px 38px;
+    height: 88px;
+    box-sizing: border-box;
 `;
 
 const Button$1 = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  font-size: 16px;
-  &:disabled{
-    cursor: not-allowed;
-    color: ${theme.colors["neutral-100"]};
-  }
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    font-size: 16px;
+
+    &:disabled {
+        cursor: not-allowed;
+        color: ${theme.colors["neutral-100"]};
+    }
 `;
 
 const ModalContent = styled.div`
-  width: 100%;
-  padding: 32px;
-  overflow-y: auto;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
+    width: 100%;
+    padding: 32px;
+    overflow-y: auto;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
 `;
 
 const ModalTitleArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: ${theme.colors["neutral-900"]};
-  margin-bottom: 40px;
-  .title{
-    font-size: 19px;
-    font-weight: 700;
-    margin: 0;
-    font-style: normal;
-    font-family: Circular, sans-serif;
-  }
-  .sub-text{
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0;
-    font-style: normal;
-    font-family: Circular, sans-serif;
-  }
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    color: ${theme.colors["neutral-900"]};
+    margin-bottom: 40px;
+
+    .title {
+        font-size: 19px;
+        font-weight: 700;
+        margin: 0;
+        font-style: normal;
+        font-family: Circular, sans-serif;
+    }
+
+    .sub-text {
+        font-size: 14px;
+        font-weight: 400;
+        margin: 0;
+        font-style: normal;
+        font-family: Circular, sans-serif;
+    }
 `;
 
 const _jsxFileName$C = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\SideModal\\SideModal.tsx"; function _optionalChain$m(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
@@ -37322,6 +37327,7 @@ const Button = styled.button`
     border: none;
     cursor:pointer;
     transition: background 0.3s;
+    position: relative;
     &.transparent-bg{
         background: transparent !important;
     }
@@ -37337,13 +37343,23 @@ const Button = styled.button`
     :disabled>*{
         opacity: 0.5;
     }
+    .indicator{
+        width: 8px;
+        height: 8px;
+        background: ${theme.colors["error-500"]};
+        border-radius: 8px;
+        top: 0;
+        right: 0;
+        position: absolute;
+    }
 `;
 
 const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\IconButton\\IconButton.tsx";
 const IconButton = (props) => {
-    const {onClick,disabled,children,isActive,transparentBg} = props;
+    const {onClick,disabled,children,isActive,transparentBg,showIndicator} = props;
     return (
         React$1.createElement(Button, { onClick: onClick, disabled: disabled, className: `${isActive ? 'active-icon' : ''} ${transparentBg ? 'transparent-bg' : ''}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 8}}
+            , showIndicator && React$1.createElement('div', { className: "indicator", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 9}})
             , children
         )
     )